JQuery-Wysiwym

The editor on this page is using wysiwym (What You See Is What You Mean). It is not meant to be used to output HTML, it simply helps with the desired markup syntax. Currently supported are Markdown, MediaWiki, and BBCode. With a little help from other projects it can be used to create a live HTML preview editor similar to what StackOverflow has. Simpler examples can be found here.

Easy to Setup

Adds an Editor Toolbar

Auto-Indents Code

Offers Syntax Help

Auto-Indents Lists

Display a Live Preview!

Demo¶

Edit the textarea to update the live preview below.

The edit buttons, auto-indentation and help syntax around this
textarea are the result of using **JQuery-Wysiwym**. This demo
is showing off the final result of jquery-wysiwym along side
[Showdown][] and [Prettify][] to create a live preview similar
to what [StackOverflow][] has.

## HTML ##

Include wysiwym.js along with Showdown and Prettify to help
with converting the raw text input to HTML.

Your HTML source also needs to include a textarea, and and a
placeholder for the live preview output to go.

## Javascript ##

Setting up the WYSIWYM editor is as simple as calling
<code>.wysiwym(...)</code> on the jQuery textarea.  The rest
of the code deals with setting up the live preview.

// Setup the WYSIWYM editor!
    $('#mytextarea').wysiwym(Wysiwym.Markdown, {});

// For the Live Preview we want to check the value of textarea changes as some
    // set interval.  If it's changed, we'll call Showdown to convert the textarea
    // input to HTML then prettify to colorize code blocks.
    var showdown = new Showdown.converter();
    var previousValue = null;
    var previewTextarea = $('#mytextarea');
    var previewOutput = $('#livepreview');
    var updateLivePreview = function() {
        var newValue = previewTextarea.val();
        if (newValue != previousValue) {
            previousValue = newValue;
            var newHtml = $("<div>"+ showdown.makeHtml(newValue) +"</div>");
            newHtml.find('pre,p code').addClass('prettyprint');
            newHtml.find('pre code').each(function() {
                $(this).html(prettyPrintOne($(this).html()));
            });
            previewOutput.html(newHtml);
        }
    }
    setInterval(updateLivePreview, 200);

[Showdown]: http://softwaremaniacs.org/playground/showdown-highlight/
[Prettify]: http://code.google.com/p/google-code-prettify/
[StackOverflow]: http://stackoverflow.com

Documentation¶

.wysiwym(markup, [options])¶

markup: Wysiwym markup class to use when editing inside the textarea. This can be one of the currently supported markup languages: Wysiwym.Markdown, Wysiwym.Mediawiki, or Wysiwym.BBCode.

options: Object used to define optional arguments to pass the Wysiwym plugin. All options are defined below.

Options¶

containerButtons¶

JQuery element to place buttons. This option is useful if you want to place the buttons in a container other than the default. By default, buttons will be placed inside a newly created element directly before the textarea: <div class='wysiwym-button'>...</div>

An example value might be: $('div.my_own_button_container').

containerHelp¶

JQuery element to place help syntax table. This option is useful if you want to place the help syntax in a container other than the default. By default, this will be placed inside a newly created element directly after the wysiwym-help-toggle (helpToggleElem) link: <div class='wysiwym-help'>...</div>

An example value might be: $('div.my_own_help_container').

helpEnabled¶

Boolean option to disable the help toggle link and help syntax all together. By default, this value is true.

helpToggle¶

Boolean option to disable only the help toggle link. This means that the help syntax table inside wysiwym-help (containerHelp) will always be visisble. By default, this value is true.

helpToggleElem¶

JQuery element to use as the toggle switch set the help syntax visibility. This option is useful if you want to use an element as the toggle other than the default. By default, this will be placed inside a newly created link directly after the textarea: <a class='wysiwym-help-toggle'>...</a>

An example value might be: $('a.my_own_help_toggle').

helpTextShow¶

String value to use as the text to display the help syntax. This option is useful if you use prefer a language other than English. By default, this value is 'show markup syntax'.

helpTextHide¶

String value to use as the text to hide the help syntax. This option is useful if you use prefer a language other than English. By default, this value is 'hide markup syntax'.