Content editable issue with RadEditor

4 posts, 0 answers
  1. Ravi Divate
    Ravi Divate avatar
    7 posts
    Member since:
    Apr 2010

    Posted 29 Jul 2011 Link to this post

    Hi Telerik,

    I am using the Telerik 2009.3 version and in specific I am facing an issue with the RadEditor control. The control is used in the page for sending mail to the users. The user can enter the mail text inside the RadEditor. We have few templates defined in the database upon selecting one of them the template content will be loaded in the RadEditor and the User will be able to modify few lines over there. Till this it works fine. The template content stored in the database is full html content which will be sent as mail to the user. In the templates we would like to restrict the user from being able to modify some content and allow him to only modify few sections in the content. So we have various <p> tags to define sections and I have ContentEditable="false" and Unselectable="on" on the <p> tags wherever we want to restrict the User from being able to edit that section. But this does not work in all cases. The user can still be able to delete or edit the content which is inside the <p>  tag which has ContentEditable="false" and Unselectable="on" attributes on it. The User will not able to select these tags directly when focus is inside the RadEditor but when the focus is outside the control and if the user clicks on these elements using mouse then it will be selectible and he can delete it or modify its contents. Ultimately the User will be able to modify the sections which is marked as ContentEditable="false" and Unselectable="on" which we don't want to allow to the user. I am attaching the sample HTML that we are loading inside the RadEditor you can try with this sample and let me know what is missing. I tried using <div><span> and even tried  ContentEditable="false" and Unselectable="on" on the <td> attributes but nothings seems working for me.

    Below is the HTML code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title></title>
     </head>
     <body style="margin: 0; background: url($ImageURL$/background.jpg)" contentEditable="false" unselectable="on"> 
      <table width="500" border="0" align="center" cellpadding="0" cellspacing="0" style="background: #fff; border: 1px solid #D8D8DA; margin-top: 10px; font-family: Helvetica, Arial, sans-serif; font-size:12px; color: #333; ">
       <tr> 
        <td style="padding: 30px 30px 20px 30px;">     
          $Content$<br/>
          $Signature$ 
        </td>
       </tr>
       <tr>
        <td><p style="padding: 0px 30px 20px 30px;" contenteditable="false" unselectable="on"><img src="$ImageURL$/line.png" alt="line" border="0" /></p></td>
       </tr>
       <tr>
        <td align="right">
         <p style="padding-right:30px;" contenteditable="false" unselectable="on">
          <a target="_blank" href="http://www.google.com">
           <img src="$ImageURL$/logo-vaf.png" alt="GOOGLE" border="0" />
          </a>     
         </p>     
        </td>
       </tr>
       <tr>
        <td><p contenteditable="false" unselectable="on" style="height: 30px; line-height: 30px; font-size: 1px;">&nbsp;</p></td>
       </tr>
      </table>  
      <table width="" border="0" align="center" cellpadding="0" cellspacing="0">
       <tr>
        <td><p contenteditable="false" unselectable="on"><img src="$ImageURL$/shadow.png" alt="Volt" border="0" /></p></td>
       </tr>
      </table>
      <table width="" border="0" align="center">
       <tr>
        <td width="450">
         <p style="color: #666666; font-size: 10px; font-family: Helvetica, Arial, sans-serif;" contenteditable="false" unselectable="on">
         EOE | © $CurrentYear$ Company, Inc. All Rights Reserved.      
        </p>
        </td>
       </tr>
      </table>  
     </body>
    </html>


    Thanks in advance,
    Ravi
  2. Rumen
    Admin
    Rumen avatar
    14028 posts

    Posted 03 Aug 2011 Link to this post

    Hello Ravi,

    The content area of RadEditor is a standard editable IFRAME element and the reported issues are browser behavior. You will experience the same behavior with a standard editable IFRAME or DIV element as well as in the different competitors' editors.
    It is also possible to press Ctrl+A and Delete/BackSpace to delete the content inside the content area or switch to HTML mode and delete it.

    Perhaps the best way is to implement your scenario as a separate solution using an editable DIV element (<div contenteditable="true" style="width:300px;height:300px;border: 1px solid red;">sample content</div> instead of RadEditor. If you are able to implement a fully functional solution that works with a standard editable DIV, we will help you integrate the code into the editor.

    Kind regards,
    Rumen
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. Ravi Divate
    Ravi Divate avatar
    7 posts
    Member since:
    Apr 2010

    Posted 03 Aug 2011 Link to this post

    I would like to try out the suggested DIV approach with ContentEditable="true" etc., but in that case I would need to display the radEditor toolbar to the user and those tools should work on this editable DIV. Please provide the code snippet to be included inorder to get the Toolbar working for the DIV. Hope this solves my problem.

    Regards,
    Ravi
  4. Rumen
    Admin
    Rumen avatar
    14028 posts

    Posted 08 Aug 2011 Link to this post

    Hi Ravi,

    My suggestion is to not render the content area of RadEditor as an editable DIV but to implement your own solution with an editable DIV (without the presence of RadEditor on the page). The contentEditable and unselectable attributes are browser's attributes but not RadEditor's attributes.
    If you succeed to implement a solution based on HTML or HTML and JavaScript send it and we will integrate it to work with RadEditor.

    You can check as alternative approach the following forum thread: http://www.telerik.com/community/forums/aspnet-ajax/editor/delete-element-prevention.aspx. You can experience side effects with the code  under the different browsers. Once again note that the user is always able to delete the whole content using CTRL+A and Delete keys that is why there isn't a 100% working solution for your scenario.

    Best regards,
    Rumen
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top