Edit this page

Editable and Non-Editable Areas

In this article you can see how you can add non-editable elements in the editable area of RadEditor. To better understand how editable areas operate in HTML, you can refer to this MDN article—Content Editable.

In order to define editable and non-editable regions in RadEditor, you should place several DIV or SPAN element containers in the editor content area. After that, set the unselectable="on" attribute to their tags in order to prohibit selection of these elements. You should also set the contentEditable attribute to "false" to put these elements in non-editable mode.

Example 1: Adding editable and non-editable areas in RadEditor.

<div style="border: red 1px solid;" contenteditable="false" unselectable="on">
    Non Editable AREA
    <div style="border: green 1px solid;" contenteditable="true" unselectable="off">
        <!--Content name="info" -->
        Editable REGION...
        <!--/Content -->
    </div>
    Non Editable AREA
</div>
important

Typically, using contenteditable="false" can serve only highly specific scenarios. RadEditor tools and commands might not operate normally with non-editable elements.

You can find additional information in the following MSDN article: UNSELECTABLE Attribute.

To disable the content editing in Firefox (Mozilla), use the -moz-user-select: none; css property. It is a Mozilla property extension to CSS that is used to determine whether or not an element may have its content selected.

The following sample code provides a simple "Hello, World!" text which prevents the user from selecting the content:

Example 2: Using inline style to prevent selection of text.

<span style="-moz-user-select: none;">Hello, World!</span>

Legal Values of the -moz-user-select css property

Value Description
inherit Inherit the value from the parent element.
none None of the content may be selected.
text Only the text within the element may be selected.
element A single element may be selected (from many).
elements Multiple elements may be selected.
all The contents must either be selected in entirety or none at all.
toggle The contents are selected "following a standard toggling content model"[1].
tri-state unknown
-moz-all unknown

See Also