Hi Team,
Below sample code I am using, now when I run the application, I have entered some text and make it as "Bold" (select from toolbar) and click enter and write some more sentence, now, what ever I wrote those sentence I am seeing with dotted lines (see the attached image).
Note# "EditMode="Design" please help me asap.
FYI, to replicate this issue use below sample code and, follow below steps.
when "EditMode="Design" first enter some sample text then make it bold that text -->click on enter-->enter some more text you will able to see dotted lines.
Goto "Preview" mode, you can able to see all the sentence which you entered in "Design" mode.
If I remove "ContentAreaMode="Div" " property, it's working fine but I need this property.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!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 runat="server">
<title></title>
</head>
<script type="text/javascript">
function RadEditorOnLoad(editor, args) {
//debugger;
var htmlArea = editor.get_textArea();
var contentArea = editor.get_contentArea();
var editorId = editor._element.id;
if (htmlArea) {
htmlArea.attachEvent('onchange', function () { MyCharacterCounter(editor, ''); });
htmlArea.attachEvent('onkeyup', function () { MyCharacterCounter(editor, ''); });
htmlArea.attachEvent('onkeypress', function () { MyCharacterCounter(editor, ''); });
}
if (contentArea) {
contentArea.attachEvent('onchange', function () { MyCharacterCounter(editor, ''); });
contentArea.attachEvent('onkeyup', function () { MyCharacterCounter(editor, ''); });
contentArea.attachEvent('onkeypress', function () { MyCharacterCounter(editor, ''); });
}
}
function MyCharacterCounter(editor, ExpLen) {
var comments = editor._contentArea.innerText;
var counterlabel = editor._element.parentElement.children[2];
if (document.getElementById(ExpLen)) {
var maxlength = document.getElementById(ExpLen).value;
}
else {
var maxlength = document.getElementById('hdnExplanationLength').value;
}
if (comments.length == parseInt(maxlength)) {
counterlabel.innerHTML = "0 Text Limit has been reached";
}
else if (comments.length > parseInt(maxlength)) {
counterlabel.innerHTML = (parseInt(maxlength) - comments.length) + " Text Limit has been exceeded, Please reduce the text";
}
else {
counterlabel.innerHTML = (parseInt(maxlength) - comments.length);
}
if (comments.length > parseInt(maxlength)) {
counterlabel.style.color = 'red'
}
else {
counterlabel.style.color = 'grey'
}
}
</script>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<div>
<table width="100%">
<tr width="100%">
<td width="100%">
<asp:HiddenField ID="hdnExplanationLength" runat="server" Value="2000" />
<telerik:RadEditor ID="txt_GeneralExplanationAdd" BorderStyle="None" runat="server"
Width="50%" ToolsFile="ToolsFile.xml" Height="200px" Font-Names="Tahoma" Font-Size="11px"
Style="margin-bottom: 5px;" EnableResize="False" ContentAreaMode="Div" StripFormattingOptions="MSWordRemoveAll,ConvertWordLists"
StripFormattingOnPaste="None" NewLineMode="Br" NewLineBr="true" OnClientLoad="RadEditorOnLoad">
</telerik:RadEditor>
<asp:Label ID="lbl_PrescriberExpTextCounter" runat="server" Text='2000' Style="color: Gray;
float: right; margin-bottom: 5px;"></asp:Label>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
ToolsFile.XML
<root>
<tools>
<tool name="Bold" strip="FontBasicTools" shortcut="CTRL+B"/>
<tool name="Italic" strip="FontBasicTools" shortcut="CTRL+I"/>
<tool name="Underline" strip="FontBasicTools" shortcut="CTRL+U"/>
<tool name="ForeColor"/>
<tool name="BackColor"/>
</tools>
<tools>
<tool name="InsertUnorderedList" strip="ListsAndIndention"/>
<tool name="InsertOrderedList" strip="ListsAndIndention"/>
<tool name="JustifyLeft" strip="Align"/>
<tool name="JustifyCenter" strip="Align"/>
<tool name="JustifyRight" strip="Align"/>
<tool name="JustifyFull" strip="Align"/>
</tools>
</root>