This is a migrated thread and some comments may be shown as answers.

Non-editable areas in Firefox

6 Answers 204 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Felix
Top achievements
Rank 2
Felix asked on 19 Jun 2008, 10:56 AM
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

6 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 19 Jun 2008, 12:47 PM
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
0
Felix
Top achievements
Rank 2
answered on 24 Jun 2008, 07:17 AM
Hi Rumen,

thanks for your reply. We gonna try that.

Regards
Felix
0
David
Top achievements
Rank 1
answered on 09 Jul 2008, 06:04 PM

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!!
-
0
Rumen
Telerik team
answered on 10 Jul 2008, 11:02 AM
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
0
David
Top achievements
Rank 1
answered on 10 Jul 2008, 03:31 PM
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!
0
Rumen
Telerik team
answered on 17 Jul 2008, 10:59 AM
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
Tags
Editor
Asked by
Felix
Top achievements
Rank 2
Answers by
Rumen
Telerik team
Felix
Top achievements
Rank 2
David
Top achievements
Rank 1
Share this question
or