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

ContentEditable in editor

5 Answers 164 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Jayanthy
Top achievements
Rank 1
Jayanthy asked on 03 Aug 2010, 08:33 PM
I would like certain areas of my html page in an editor to be editable and certain areas non-editable. I tried the following, but it doesn't work properly. It acts differently in different browsers.
IE:
The content is not editable if I click within the td, but if I click outside the td, I'm able to edit it.

Firefox:
I'm unable to edit both the editable and non-editable areas

Chrome:
I'm able to edit both editable and non-editable areas.
Am I missing something?

<telerik:RadEditor runat="server" ID="RadEditor1"  Height="400px">     
      <Content> 
         <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
         <html xmlns="http://www.w3.org/1999/xhtml" > 
            <body> 
        <table>
<tr><td contenteditable="false" unselectable="on">Editable</td>
                       <td contentEditable="true" unselectable="off" >NonEditable</td>
                </tr>
        </table>
          </body> 
         </html> 
      </Content> 
</telerik:RadEditor> 

5 Answers, 1 is accepted

Sort by
0
Dobromir
Telerik team
answered on 05 Aug 2010, 04:09 PM
Hi Jayanthy,

In order 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.

In addition, by default, contentEditable property's value is inherited and if set to a child element to the same value it may cause some side effects, i.e.
<tr contentEditable="true"><td contentEditable="true">...

I modified the provided sample markup to behave as expected
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
   <body>
   <table>
       <tr>
           <td contenteditable="false" unselectable="on" style="-moz-user-select:none;-webkit-user-select:none;">NonEditable</td>
           <td>Editable</td>
           <td contenteditable="false" unselectable="on" style="-moz-user-select:none;-webkit-user-select:none;">Non-Editable</td>
       </tr>
       <tr>
           <td>Editable</td>
           <td contenteditable="false" unselectable="on" style="-moz-user-select:none;-webkit-user-select:none;">Non-Editable</td>
           <td contenteditable="false" unselectable="on" style="-moz-user-select:none;-webkit-user-select:none;">Non-Editable</td>
       </tr>
   </table>
 </body>
</html>


Greetings,
Dobromir
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Danny
Top achievements
Rank 1
answered on 09 Aug 2010, 08:18 PM
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.

Many thanks for any help you can offer.

Regards

Tim
0
Rumen
Telerik team
answered on 12 Aug 2010, 12:31 PM
Hi Tim,

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.

Kind regards,
Rumen
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Jayanthy
Top achievements
Rank 1
answered on 13 Aug 2010, 04:19 PM
Hi Dobromir ,

I tried your solution. It works perfectly in IE, but not in FF & Chrome. 

Chrome: I'm able to select the entire table from outside the table area and remove/modify the entire table.
FF: I'm able to select the entire table from outside the table area and edit just column 1.

Thanks,
Jayanthy.
0
Rumen
Telerik team
answered on 18 Aug 2010, 09:55 AM
Hi Jayanthy,

This is a browser behavior. My suggestion is to collapse the selection which will deselect the selected table cells when you try to select a table. You can do that using the following code:

<script type="text/javascript">
    function OnClientSelectionChange(editor, args) {
        if ($telerik.isIE) return;
        var selection = editor.getSelection();
        selection.collapse(true);
    }
</script>
<telerik:RadEditor OnClientSelectionChange="OnClientSelectionChange" ID="RadEditor1" runat="server">
    <Content>
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml" >
               <body>
               <table>
                   <tr>
                       <td contenteditable="false" unselectable="on" style="-moz-user-select:none;-webkit-user-select:none;">NonEditable</td>
                       <td>Editable</td>
                       <td contenteditable="false" unselectable="on" style="-moz-user-select:none;-webkit-user-select:none;">Non-Editable</td>
                   </tr>
                   <tr>
                       <td>Editable</td>
                       <td contenteditable="false" unselectable="on" style="-moz-user-select:none;-webkit-user-select:none;">Non-Editable</td>
                       <td contenteditable="false" unselectable="on" style="-moz-user-select:none;-webkit-user-select:none;">Non-Editable</td>
                   </tr>
               </table>
             </body>
            </html>
 
    </Content>
</telerik:RadEditor>


Kind regards,
Rumen
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
Editor
Asked by
Jayanthy
Top achievements
Rank 1
Answers by
Dobromir
Telerik team
Danny
Top achievements
Rank 1
Rumen
Telerik team
Jayanthy
Top achievements
Rank 1
Share this question
or