What is designMode?
Almost all major browsers offer a de facto support for rich text editing, which makes an entire DOM document editable. It was originally developed for Internet Explorer, however, later implementations by other browsers are proven to be surprisingly compatible and stable. The functions in this plugin can help you turn any frame, iframe or window into a cross-browser wysiwyg editor.
This technique can be referred to as designMode, because it's triggered by setting the
designMode property of a DOM document to
execCommand() function. Mozilla provides a good specification of avalible commands.
What this plugin does
There are some browser differences related to designMode. This plugin handles such stuff in a cross-browser way, combined with the flexibility of jQuery.
Although complete wysiwyg editors require lots of work, this plugin provides the very basic functionality to be used as a part of something more advanced.
At least the following browsers have full or limited support for designMode:
- Internet Explorer 6+
- Firefox 1.5+
- Safari 1.3+
- Opera 9+
There are three jQuery functions to be used on any frame, iframe or window:
contentDocument()- access the DOM document of an element.
designMode()- set the designMode property. Chaining supported.
execCommand()- execute designMode commands. Chaining supported.
In these examples, #foo is either a frame, iframe or window (created by window.open for instance).
$(window).designMode('on') //Activate designMode of current page
$('#foo').designMode(); //Mode is optional, defaults to 'on'
$('#foo').execCommand('formatblock', '<p>'); //Execute command, with optional parameter
$('#foo').designMode().execCommand('bold'); //Chaining: Activate + execute
var doc = $('#foo').contentDocument(); //Access the DOM document