Ravi Divate
Top achievements
Rank 1
Rank 1
Ravi Divate
asked on 29 Jul 2011, 01:06 PM
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;"> </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
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;"> </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
3 Answers, 1 is accepted
0
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
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.
0
Ravi Divate
Top achievements
Rank 1
Rank 1
answered on 03 Aug 2011, 05:23 PM
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
Regards,
Ravi
0
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
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.