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

ContentEditable in editor

5 Answers 266 Views

Editor

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

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">

<!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">Editable</td>
   <td contentEditable="true" unselectable="off" >NonEditable</td>
   </tr>
   </table>

</body>

</html>

</Content>

</telerik:RadEditor>

5 Answers, 1 is accepted

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">

<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>

</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

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>

</tr>

</table>

</body>

</html>

</Content>

</telerik:RadEditor>

Kind regards,
Rumen
the Telerik team