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

contentEditable on a table cell

2 Answers 129 Views
Editor
This is a migrated thread and some comments may be shown as answers.
cheeves
Top achievements
Rank 1
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: <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

Sort by
0
Accepted
Dobromir
Telerik team
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.
0
cheeves
Top achievements
Rank 1
answered on 04 Jun 2010, 10:47 AM
thanks very much for your fast response  Dobromir 
Tags
Editor
Asked by
cheeves
Top achievements
Rank 1
Answers by
Dobromir
Telerik team
cheeves
Top achievements
Rank 1
Share this question
or