Problem with inserting 1 line break in a paragraph. If 2 line breaks, it works.

4 posts, 0 answers
  1. Ema
    Ema avatar
    4 posts
    Member since:
    Jan 2014

    Posted 20 Jan 2014 Link to this post

    Hi Telerik,

    I have a problem with inserting one line break within the paragraph because it did not render as line break <br/>. If I enter 2 line breaks, that is the time it renders <br/>  within the <p> tags.

    Please see below for more elaboration:

    Below is my telerik radeditor code in markup page (.aspx):

    <telerik:RadEditor ID="uscEditor" runat="server" Width="650" ToolsFile="~/EditMailTemplateTools.xml"
                            ContentAreaMode="Div" EditModes="Design" ExternalDialogsPath="~/Controls" DialogHandlerUrl="~/Telerik.Web.UI.DialogHandler.axd"
                            LocalizationPath="~/Resources/RadEditor Dialog" ContentFilters="RemoveScripts, ConvertToXhtml, FixEnclosingP">
                            <CssFiles>
                                <telerik:EditorCssFile Value="../../Includes/Styles/EditorStyle.css" />
                            </CssFiles>
                            <ContextMenus>
                                <telerik:EditorContextMenu TagName="A" Enabled="false">
                                </telerik:EditorContextMenu>
                                <telerik:EditorContextMenu TagName="*">
                                    <telerik:EditorTool Name="Cut" />
                                    <telerik:EditorTool Name="Copy" />
                                    <telerik:EditorTool Name="Paste" />
                                </telerik:EditorContextMenu>
                            </ContextMenus>
                        </telerik:RadEditor>


    My EditorStyle.css is this:
    .reContentArea  /*this selector corresponds to the body selector when RadEditor is in Iframe mode*/
    {
        font-family: Verdana !important;
        font-size: 12px !important;
        color: white;
        background-color: #555 !important;
        text-align: left !important;
        word-wrap: break-word !important;
        padding: 3px 15px 3px 15px !important;
    }
     
    .reContentArea P
    {
        margin: 0;
        border: 1px solid #666;
        color: #666;
        font-size: 12px;
        padding: 10px;
    }
     
    .reContentArea H1
    {
        margin: 0;
        border: 1px solid #666;
        color: #000;
        padding: 20px;
    }
     
    .reContentArea OL
    {
        margin-top: 20px;
        list-style-type: lower-roman;
        border: 1px solid #666;
        color: #555;
        padding: 10px 10px 10px 55px;
    }
     
    .reContentArea table
    {
      BORDER-RIGHT: #99ff99 1px dashed;
      BORDER-BOTTOM: #99ff99 1px dashed;
      width:100%;
      margin-top: 20px;
    }
     
    .reContentArea table td
    {
      font-size: 12px !important;
      color: #555;
      PADDING: 3px;
      BORDER-TOP: #99ff99 1px dashed;
      BORDER-LEFT: #99ff99 1px dashed;
      text-align: center;
    }
     
    .reContentArea img
    {
        margin: 1px 1px 1px 1px;
        border: solid 1px blue;
    }


    so this is the content of the editor being set on page load:
    <p><span class="param">[asdadsd]</span><br /><br /></p><p>asdsadaddasd d sffdsfdsfsf, wuweqiwqeiwuicxen period</p><p>Best regards,<br />sadasdasd</p><p>dasadsadsad qwweuic xnnnsansansawqwqi.</p>

    Then, I decided to modify the message and click save (see below)

    So what I did was I am going to enter line break between the word 'period' and 'Best regards'. So I positioned my cursor at the end of word 'period' and press enter. In the UI, it did show a line break. But after saving it, there is no line break anymore because the html output of the content of the editor is this (which is still the same) :

    editor.Content :
    <p><span class="param">[asdadsd]</span><br /><br /></p><p>asdsadaddasd d sffdsfdsfsf, wuweqiwqeiwuicxen period</p><p>Best regards,<br />sadasdasd</p><p>dasadsadsad qwweuic xnnnsansansawqwqi.</p>

    Even if I position my cursor before the letter B in Best Regards and hit enter, it still does not work.

    If I enter 2 line breaks, that is the time it renders <br/>  within the <p> tags.
    editor.Content becomes this:
    <p><span class="param">[asdadsd]</span><br /><br /></p><p>asdsadaddasd d sffdsfdsfsf, wuweqiwqeiwuicxen period<br /><br /></p><p>Best regards,<br />sadasdasd</p><p>dasadsadsad qwweuic xnnnsansansawqwqi.</p>

    Can you help me with this? What should I do to make it work (entering one line break and it will be as such)?

    Thank you!

    Best Regards,
    Ema
  2. Ema
    Ema avatar
    4 posts
    Member since:
    Jan 2014

    Posted 21 Jan 2014 Link to this post

    By the way, I am using Telerik version v4.0.30319
    My browser is IE9
  3. Ema
    Ema avatar
    4 posts
    Member since:
    Jan 2014

    Posted 21 Jan 2014 Link to this post

    Telerik Runtime version - v4.0.30319

    Telerik Version - 2011.2.712.40
  4. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5347 posts

    Posted 22 Jan 2014 Link to this post

    Hi Ema,

    Some browsers add unnecessary <br> tags at the end of paragraphs which is why there is a filter in RadEditor that strips such rogue elements. In most cases they are unwanted and not created by the user.
    In your case you would need to disable this filter:
    function removeFilters(sender, args) {
        sender.get_filtersManager().removeFilterByName("RemoveExtraBrakes");
    }

    <telerik:RadEditor ID="uscEditor" runat="server" OnClientLoad="removeFilters">
     . . . .
    </telerik:RadEditor>

    I am attaching here a small sample and a video from the behavior on my end as a reference.
    I would also advise upgrading your RadControls because your version is more than two and a half years old, and there are many fixes and improvements introduced since then. Also, support for the modern browsers is available in the latest version.

    Regards,
    Marin Bratanov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top