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>
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 |