Enter data into Rad Editor after apply "Bold" style data not shown as dotted lines.

1 posts, 0 answers
  1. Monu
    Monu avatar
    1 posts
    Member since:
    Mar 2018

    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">
        <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>
Back to Top