Getting Started

Basic Usage

$('#editor').wysiwyg();

Don't forget to style your editor div:

#editor {overflow:scroll; max-height:300px}

If you want to use this for a mobile web site, make sure to read about how to style it to optimise mobile screen usage and experience (please note that this demo page isn't optimised for mobile access).

Optionally, also create a toolbar (see the source of this page for an example):

<div class="btn-toolbar" data-role="editor-toolbar"
        data-target="#editor">
  ...
</div> 

In the toolbar, execute simple commands by adding a data-edit attribute to a link.

<a data-edit="bold">...</a>

execute more complex commands by adding an argument after a blank or providing an input with a data-edit command (the input value is used as an argument). In case of file inputs, the file contents are read in using the FileReader API and used as the command value.

<a data-edit="fontName Arial">...</a>
...
<input type="text" data-edit="createLink"/>
...
<input type="file" data-edit="insertImage" />

Use standard jQuery methods to access and set content and focus. You can also ask for cleaned up HTML content:

$('#editor').cleanHtml()

Customising

You can assign commands to hotkeys and toolbar links. For a toolbar link, just put the execCommand command name into a data-edit attribute. For more info on execCommand, see the QuirksMode and Mozilla Developer documentation.

<div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
  <a class="btn btn-large" data-edit="bold"><i class="icon-bold"></i></a>
</div>

To pass arguments to a command, separate a command with a space.

  <a data-edit="fontName Arial">...</a>

You can also use input type='text' with a data-edit attribute. When the value is changed, the command from the data-edit attribute will be applied using the input value as the command argument

<input type="text" data-edit="createLink">

If the input type is file, when a file is selected the contents will be read in using the FileReader API and the data URL will be used as the argument

<input type="file" data-edit="insertImage">

To change hotkeys, specify the map of hotkeys to commands in the hotKeys option. For example:

$('#editor').wysiwyg({
  hotKeys: {
    'ctrl+b meta+b': 'bold',
    'ctrl+i meta+i': 'italic',
    'ctrl+u meta+u': 'underline',
    'ctrl+z meta+z': 'undo',
    'ctrl+y meta+y meta+shift+z': 'redo'
  }
});

Events

Change

Fired whenever anything changes. See this example events.html

$('#editor').wysiwyg().on('change', function(){
	alert('something has been changed on the editor');
});