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.


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'.