Non-editable areas in Firefox

[Felix]

Hi there,

i tried to disable parts in the content of the editor with:

contentEditable=" false" unselectable="on"

(as described here)

But unfortunately its not working in Firefox.

Is there any workaround for this scenario to disable selecting and editing of certain areas in editors content?

Thanks in advance
Felix

[Rumen]

Hi Felix,

Please, review the following forum thread on the topic: non-editable HTML regions and this code library project: Snippets with locked content.

Another way to disable only some regions is to use the following solution:

<script type="text/javascript">
function onClientLoad (editor, args)
{
    editor.attachEventHandler ("onclick", EnableDisableEditing);
    editor.attachEventHandler ("onkeydown", EnableDisableEditing);
    editor.attachEventHandler ("onkeyup", EnableDisableEditing);
 
      function EnableDisableEditing(e)
      {
            var element = editor.getSelection().getParentElement();
            if ( element.getAttribute("editable") == "false")
            {
             
                editor.set_editable(false);
                if (!document.all)
                {
                    e.preventDefault();
                    e.preventBubble();
                    e.stopPropagation();
                }
                else
                {
                    e.returnValue = false;
                    e.cancelBubble = true;
                }
                return false;      
            }
            else
            {
                editor.set_editable(true);
            }
      }
}
</script>
<telerik:radeditor onClientLoad="onClientLoad" runat="server" ID="RadEditor1">
    <Content>
         <div editable="false" style="border: 3px solid red">non editable</div><br><br/><br/>
         <div editable="true" style="border: 3px solid green">editable</div>
    </Content>
</telerik:radeditor>


Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Felix]

Hi Rumen,

thanks for your reply. We gonna try that.

Regards
Felix

[David]

Would one suggest this is, currently, the best way/method to implement non-editable regions?

Have any implemented and found to be sound across browsers/platforms?

I've been tinkering with, and wanted to find a means of node's editable property cascading down to all children, unless overridden, in order to simplify-- fewer properties to add.  Apply editable=false to 'root' node and set editable=true on specific children.

Keeping in mind js is not my thing i've, thus far, modded the script, as follows:

function OnClientLoad(editor, args)
{
    editor.attachEventHandler ("onclick", EnableDisableEditing);
    editor.attachEventHandler ("onkeydown", EnableDisableEditing);
    editor.attachEventHandler ("onkeyup", EnableDisableEditing);

      function EnableDisableEditing(e)
      {
            var editable = true;
            var element = editor.getSelection().getParentElement();

            while(element != null)
            {
                if (element.getAttribute("editable") == "true")
                {
                    editable = true;
                    break;
                }
                if (element.getAttribute("editable") == "false")
                {
                    editable = false;
                    break;
                }
                element = element.parentNode;
            }

            if (editable == false)
            {
                editor.set_editable(false);

                if (!document.all)
                {
                    e.preventDefault();
                    e.preventBubble();
                    e.stopPropagation();
                }
                else
                {
                    e.returnValue = false;
                    e.cancelBubble = true;
                }
                return false;
            }
            else
            {
                editor.set_editable(true);
            }
      }

Seems to work so far but would welcome any improvements or better means to do.

Couple things I'd like to figure out-- and this isn't just applicable to above-- is:
 
1)How to prevent parent tags being highlighted/outlined....

For example, clicking in word, paragraph that is inside a TD.. the TABLE gets highlighted. 
Or, the 'root' DIV might be highlighted/outlined.

2) and when a root/parent container IS highlighted the outline/handles exceed the boundaries of the editor and appear on the page.

Thanks!!
-

[Rumen]

Hi David,

I am not sure if you know this Mozilla css property but you can achieve non-editable
    regions in firefox like this:
         <div style="-moz-user-select: none;">
    <ul>
        <li><em>Single-file, drag-and-drop deployment</em></li>
        <li><em>Built on top of ASP.NET AJAX</em></li>
        <li><em>Unmatched loading speed with new semantic rendering
    </em></li>
        <li><em>Full keyboard accessibility</em></li>
        <li><em>Flexible Skinning mechanism</em></li>
        <li><em>Simplified and intuitive toolbar configuration</em></li>
        <li><em>Out-of-the-box XHTML-enabled output</em></li>
    </ul>
    </div>
    <div>
    test</div>

You can find more information in the following forum thread: non-editable HTML regions.

All the best,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[David]

I did, and had experimented with it, but in the interest of minmimizing req'd mark-up.. the above seems to be working, so far.

Could you please recommend how to correct item 2, I'd mentioned? ..
The div & table outlines/drag handles exceed editor and show in page.

Thanks!

[Rumen]

Hi David,

Actually, the second problem (the div & table outlines/drag handles exceed editor and show in page) is a browser behavior. The handlers are entirely controlled by the browser and we cannot hide them even using javascript code.
You can easily reproduce the same behavior in a standard editable IFRAME or DIV element or by testing our competitors.

If you would like you can set AutoResizeHeight property to "true" and the editor will resize its content area depending on the content height in it.

Kind regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center