Revision as of 08:30, 21 June 2010

Overview

Non-editable, read-only contents in WYSIWYG mode document could be achieved by specifying the standard-compliant contenteditable attribute on the element, this will result in such element as well as it's content being unable to modify by editor keystrokes, commands and also dialogs, while remains displaying in the same way as ordinary elements (except for some special cases, e.g. in IE, non-editable inline elements are displayed as 'inline-block') in editor, which makes it possible to present "placeholder" region that are not intended to be modified by the end user while keeps informatively rich (comparing to an image place holder).

Example

The following HTML content defines one read-only paragraph and one other contains a non-editable span.

<p>First paragraph <b>editable</b>.</p>
<p contenteditable="false">Second paragraph is read-only.</p>
<p>Third paragraph with <span contenteditable="false"> non-editable content</a>.</p>

Editor behavior

1. When executing an editor command, e.g. applying one style on a selection that contains such element, editor behaves as if the selection range is split up by this element into multiple slices of ranges thus the style are applied onto each range except for the element.
2. When navigating inside the document with keytrokes, e.g. Left/Right Arrow, to move cross such element, cursor will avoid from entering the element but jump over to the other side of it.
3. The result of deletion requests, e.g. press Del/Backspace keys, beside such element is browser dependent, it will either delete the entire element (IE,Safari,Chrome) or preventing the element from removed (Firefox).
4. Left single click on the non-editable element will select the entire element.
5. Right single click to open context menu on non-editable element will not display menu items that could modify the element.
6. Open dialogs on non-editable element will not load the element into dialog fields for modification.

Known limitations

• Nested editable element inside non-editable is not supported yet.
• Table element in IE can't be made as non-editable, see this ticket.

Availability

Since CKEditor 3.4