Rad Editor content interrupt the letters/words

1 posts, 0 answers
  1. Dev
    Dev avatar
    4 posts
    Member since:
    Jan 2015

    Posted 28 Mar 2018 Link to this post

    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">
    <script type="text/javascript">

        function RadEditorOnLoad(editor, args) {
            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'
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <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">
                        <asp:Label ID="lbl_PrescriberExpTextCounter" runat="server" Text='2000' Style="color: Gray;
                            float: right; margin-bottom: 5px;"></asp:Label>



        <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"/>
        <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"/>


Back to Top