designMode What is designMode?What this plugin doesExamples

designMode What is designMode?What this plugin doesExamples 介绍

Cross-browser designMode

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 'on' using
JavaScript. The content can be modified by a set of commands using the
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.

Examples

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', ''); //Execute command, with optional parameter $('#foo').designMode().execCommand('bold'); //Chaining: Activate + execute var doc = $('#foo').contentDocument(); //Access the DOM document