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">
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">
5 Answers, 1 is accepted
0
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
Greetings,
Dobromir
the Telerik team
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"> <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>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
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
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
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
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
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.
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
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:
Kind regards,
Rumen
the Telerik team
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