WYSIWYG - jQuery

Download Demo

This plugin is an inline content editor to allow editing rich HTML content on the fly. It’s an alternative to WYMeditor with much less features. With a small file size less than 17Kb 26Kb total and only 9Kb 18Kb of code and 7Kb packed, the main concept is to keep it simple, not all users need font coloring or create tables, just the basic.

• GNU General Public License v2


• Compact and lightweight


• Ajax dynamic preview


• Browser friendly

Quick Start

The following code creates a jWYSIWYG editor with the default options:

<script type="text/javascript" src="jquery.wysiwyg.js"></script>
<script type="text/javascript">
$(function() 
 $('#wysiwyg').wysiwyg();
);
</script>

<textarea id="wysiwyg"></textarea>

Activating Hidden Controls

Toolbar buttons are selected with the controls configuration option:

$('#wysiwyg').wysiwyg(
 controls: 
 strikeThrough: visible: true ,
 underline: visible: true ,
 subscript: visible: true ,
 superscript: visible: true 
 
);

A full list of available controls options is available in ____.

Adding Custom Controls

Custom controls can also be specified with the controls option:

$('#wysiwyg').wysiwyg(
 controls: 
 alertSep: separator: true ,
 alert: 
 visible: true,
 exec: function() alert('Hello World'); ,
 className: 'alert'
 
 
)

Another way:

$('#wysiwyg').wysiwyg("addControl",
 "controlName",
 
 icon: "/path/to/icon.png",
 exec: function() alert('Hello World'); 
 
);

Styling the Content Inside the Editor

To apply a CSS stylesheet to the content inside the editor, use the css configuration option:

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

The editor will not inherit the style of the containing page anyway, you must specify a CSS file to apply to it.

Clear the Editor

To clear the editor at any time:

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

Focus the Editor

To focus on the editor at any time:

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

Insert an Image

When the #insertImage link is clicked, insert an image inline at the current cursor location in the editor:

$('a[href="#insertImage"]').click(function() 
 $('#wysiwyg').wysiwyg('insertImage', 'img/hourglass.gif');
);

Note

Include file wysiwyg.image.js to provide this function

Insert an Image with Attributes

Add some additional attributes to the image, as well:

$('a[href="#insertImage"]').click(function() 
 $('#wysiwyg').wysiwyg('insertImage', 'img/hourglass.gif', 'class': 'myClass', 'className': 'myClass' );
);

WYSIWYG - jQuery