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

[Solved] contentEditable on a table cell

2 Answers 260 Views

Editor

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

cheeves asked on 10 May 2010, 06:21 PM

Hi,

I'm trying to implement a custom table editor and as part of this i would like the tables content not to be editable in the editor.

I would also like the content of the editor to have a doctype.

Below is a small code sample, the problem I am having is that is is still possible to put the cursor inside the table and edit the content.

Any help would be greatly appreciated.

thanks

                       <telerik:RadScriptManager ID="ScriptManager1" runat="server" />         
               <telerik:RadEditor runat="server" ID="RadEditor1" SkinID="MinimalSetOfTools" Height="400px">         
                  <ContextMenus>         
                     <telerik:EditorContextMenu TagName="TABLE">         
                        <telerik:EditorTool Name="EditTable" Text="Edit" />         
                     </telerik:EditorContextMenu>         
                     <telerik:EditorContextMenu TagName="TH">         
                        <telerik:EditorTool Name="EditTable" Text="Edit" />         
                     </telerik:EditorContextMenu>         
                     <telerik:EditorContextMenu TagName="TR">         
                        <telerik:EditorTool Name="EditTable" Text="Edit" />         
                     </telerik:EditorContextMenu>         
                     <telerik:EditorContextMenu TagName="TD">         
                        <telerik:EditorTool Name="EditTable" Text="Edit" />         
                     </telerik:EditorContextMenu>         
                  </ContextMenus>         
                  <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>         
                           Right-click on image to see custom menu         
                           <img style="marign-left: 6px" width="179px" height="28px" src="../../Img/productLogoLight.gif" /><br/><br/>         
                           <p>Right-click here to see the custom Paragraph menu.<br/></p><br/>         
                           Right-click on the link to see the default link menu disabled: <a href="/">www.telerik.com</a>         
                           <table>         
                              <tr>         
                                 <td><div  contentEditable="false" unselectable="on">table content</div></td> 
                    
                              </tr>         
                           </table>         
                        </body>         
                     </html>         
                  </Content>         
               </telerik:RadEditor>         

[EDIT: the browser I'm using is IE8]

2 Answers, 1 is accepted

Accepted

answered on 13 May 2010, 09:35 AM

Hi Conall,

The reason for this problem is that even if the <div> element is not editable and not selectable you still can select the table cell element. As a solution to this issue I suggest you to examine current selection to see if it is a <td> that should not be edited. In order to achieve this you need to attach a handler to the OnClientSelectionChange client-side event, e.g.:

<telerik:RadEditor ID="RadEditor1" runat="server" OnClientSelectionChange="OnClientSelectionChange">

<Content>

......

</Content>

</telerik:RadEditor>

<script type="text/javascript">

function OnClientSelectionChange(editor, args)

{

if (editor.getSelectedElement().tagName == "TD")

{

//implement custom logic to prevent editing

}

</script>

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.