CKeditor 3.x/Users Guide/NonEditable Contents - Revision history

Wiktor: /* Example */

2013-05-29T07:58:48Z

‎Example

Garryyao at 07:30, 21 June 2010

2010-06-21T07:30:31Z

Garryyao: Init page

2010-06-17T16:11:05Z

Init page

New page

== Overview ==

Non-editable, read-only contents in WYSIWYG mode document could be achieved by specifying the standard-compliant [http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#contenteditable 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.
<pre>
First paragraph editable.
Second paragraph is read-only.
Third paragraph with non-editable content</a>.
</pre>
== Editor behavior ==
# 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.
# 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.
# 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).
# Left single click on the non-editable element will select the entire element.
# Right single click to open context menu on non-editable element will not display menu items that could modify the element.
# 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 [http://dev.fckeditor.net/ticket/5655 ticket].

@@ Line 8: / Line 8: @@
 <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>
+<p>Third paragraph with <span contenteditable="false"> non-editable content</span>.</p>
 </pre>
 == Editor behavior ==
 # 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.

← Older revision		Revision as of 07:30, 21 June 2010
Line 21:		Line 21:
	* Nested editable element inside non-editable is not supported yet.		* Nested editable element inside non-editable is not supported yet.
	* Table element in IE can't be made as non-editable, see this [http://dev.fckeditor.net/ticket/5655 ticket].		* Table element in IE can't be made as non-editable, see this [http://dev.fckeditor.net/ticket/5655 ticket].
		+
		+	== Availability ==
		+	Since CKEditor '''3.4'''