NonEditable Contents

This website contains links to software which is either no longer maintained or will be supported only until the end of 2019 (CKFinder 2). For the latest documentation about current CKSource projects, including software like CKEditor 4/CKEditor 5, CKFinder 3, Cloud Services, Letters, Accessibility Checker, please visit the new documentation website.

If you look for an information about very old versions of CKEditor, FCKeditor and CKFinder check also the CKEditor forum, which was closed in 2015. If not, please head to StackOverflow for support.

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

Retrieved from "https://docs-old.ckeditor.com/index.php?title=CKeditor_3.x/Users_Guide/NonEditable_Contents&oldid=3727"