All content uneditable by default using contenteditable

[Danny]

Hi,

Is it possible to make all content uneditable by default by, for example, specifying a div tag after the body tag, and then selectively enable editing of just the odd part of the HTML document? It would seem to make the most sense because most of the time you would want the user to edit just a small part of the web page and to have to specifiy what can and cannot be edited would be extremely tedious. I have experimented with numerous options at the beginning of the document but none seem to achieve the above.

I am wanting to give a client a basic CMS facility within the editor but to keep it relatively simple to implement.

Many thanks for any help you can offer.

Regards

Tim

[Rumen]

Hi Timmy,

You can disable the typing in the body element of the editor's content area using the following code:

<script type="text/javascript">
    function OnClientLoad(editor) {
        var body = editor.get_document().body;
        body.setAttribute("unselectable", "on");
    }
</script>
<telerik:RadEditor ID="RadEditor1" OnClientLoad="OnClientLoad" runat="server">
<Content>
    <div style="BORDER: green 1px solid;" id="editableDIV1" contentEditable="true" unselectable="off">
        Editable REGION...
    </div>
</Content>
</telerik:RadEditor>

Sincerely yours,
Rumen
the Telerik team

[Danny]

Hi,

Thanks for the prompt reply.

I've manually set the BODY attribute but it doesn't make any difference. I checked the Microsoft documentation which says that the UNSELECTABLE attribute is not inherited by child objects which seems to suggest that individual tags have to be set manually to determine whether it's editable or not. This would be too time consuming. I would ideally like a simple tag which says that everything in between can or cannot be edited. This would make it ideal as a CMS system.

Any other thoughts?

Thanks

Tim

[Rumen]

Hello Timmy,

The content area of RadEditor is a standard editable IFRAME element and I am afraid that the HTML specification does not offer the requested functionality. You should manually apply unselectable and contenteditable to the elements that you want to be enabled or disabled.

In addition to disable editing for parts of the content you need to set the CSS properties -moz-user-select:none; and -webkit-user-select:none for Firefox and Chrome / Safari respectively.

Best regards,
Rumen
the Telerik team