New lines content in IE and Chrome

7 posts, 0 answers
  1. Roman
    Roman avatar
    3 posts
    Member since:
    Oct 2011

    Posted 29 Mar 2012 Link to this post

    Hi,

    We have noticed the following behaviour:
    Scenario:
    1) Set the new line mode to paragraph
    2) Enter some line, for example "First Line", and press Enter
    3) Go to HTML view
    Perform this actions in IE and Chrome.
    HTML view in IE:
    <p>New Line</p>
    <p>&nbsp;</p>
    HTML view in Chrome:
    <p>New Line</p>
    <p><br />
    </p>

    Why is the mark-up different in this browsers? Is this the expected behaviour or such kind of a bug?

    Best regards,
    Roman
  2. Rumen
    Admin
    Rumen avatar
    14351 posts

    Posted 02 Apr 2012 Link to this post

    Hello,

    The <br> tag inside the inserted paragraph is needed, because in other case the WebKit browsers will not render the empty paragraph.

    Kind regards,
    Rumen
    the Telerik team
    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 their blog feed now.
  3. Kiran
    Kiran avatar
    6 posts
    Member since:
    Oct 2008

    Posted 03 Apr 2012 Link to this post

    Hello Rumen,

    Thanks for the reply.

    Can you please elaborate "because in other case the WebKit browsers will not render the empty paragraph." it further? Because we tried following steps:

    1. Created one new HTML page.
    2. With following content:

    <html>
    <body>
    <P>SPACE&nbsp;</p>
    <p>BR<br/></p>
    <p>&nbsp;</p>
    </body>
    </html>

    3.  both works fine as expected. As per "because in other case the WebKit browsers will not render the empty paragraph" we understands that it will not render last &nbsp; p tag [<p>&nbsp;</p>] But it is rendering in chrome.

    Thanks in advance,
    Kiran
  4. Rumen
    Admin
    Rumen avatar
    14351 posts

    Posted 03 Apr 2012 Link to this post

    Hello,

    You can see in the following video what I mean: http://screencast.com/t/37u9LscC.
    For your convenience I have attached a test HTML page with an editable iframe in it.


    All the best,
    Rumen
    the Telerik team
    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 their blog feed now.
  5. Kiran
    Kiran avatar
    6 posts
    Member since:
    Oct 2008

    Posted 03 Apr 2012 Link to this post

    Hello Rumen,

    Thanks for the reply, video and HTML!

    In same page we tried "<p>&nbsp;</p>" and we noticed that it renders P tag. And that's what we want. [Instead of <br/> it should generate &nbsp;]

    Kiran

  6. Kiran
    Kiran avatar
    6 posts
    Member since:
    Oct 2008

    Posted 05 Apr 2012 Link to this post

    Hello Rumen,

    Sorry to chase you. But have you found anything?

    Kiran
  7. Rumen
    Admin
    Rumen avatar
    14351 posts

    Posted 05 Apr 2012 Link to this post

    Hello,

    The enter command of the WebKit browsers inserts a div element with a <br> tag in it: <div><br></div>. What the NewLineMode="P" mode does is to replace the <div> opening and closing tags with <p>.

    If you would like to replace the <br> tag with &nbsp; which operation we do not support, you can do that using the following script code:

    <telerik:RadEditor runat="server" ID="RadEditor1" NewLineMode="P"></telerik:RadEditor>
        <script type="text/javascript">
            Telerik.Web.UI.Editor.EnterNewLineCommand.prototype.ensureModeElement = function () {
                var editor = this.editor;
                var element = editor.getSelectedElement();
                var parentTagName = "P";
                var replaceTagName = "DIV"
                if (this._newLineMode == Telerik.Web.UI.EditorNewLineModes.P) {
                    parentTagName = "DIV";
                    replaceTagName = "P"
                }
     
                //this is needed in order to be able to set the focus in an element such as <b></b>
                if ($telerik.isFirefox && element.innerHTML == "")
                    element.innerHTML = "<br />";
     
                var pNode = Telerik.Web.UI.Editor.Utils.getElementParentByTagWithConstraint(element, parentTagName, "TD");
     
                var previousSibling = element.previousSibling;
                if (previousSibling && (previousSibling.innerHTML.match(/^\s*$/) || previousSibling.innerHTML == "<br>")) {
                    previousSibling.innerHTML = "&nbsp;";
                }
     
                if (pNode && !Telerik.Web.UI.Editor.Utils.isEditorContentArea(pNode)) {
                    var previousSibling = pNode.previousSibling;
                    if (previousSibling) {
                        var nodeName = previousSibling.nodeName;
                        if (nodeName == parentTagName) {
     
     
                            previousSibling = Telerik.Web.UI.Editor.Utils.replaceNode(previousSibling, replaceTagName);
                            if (previousSibling.innerHTML.match(/^\s*$/) || previousSibling.innerHTML == "<br>") {
                                previousSibling.innerHTML = "&nbsp;";
                            }
                        }
                    }
                    var newNode = Telerik.Web.UI.Editor.Utils.replaceNode(pNode, replaceTagName);
                    //this will ensure that the focus will be set in an empty element
                    if (newNode.innerHTML.match(/^\s*$/) || newNode.innerHTML == "<br>") {
                        newNode.innerHTML = "&nbsp;";
                    }
                    //In case of code such as <div><strong>text</strong><div>
                    //we need to make sure that the focus will be set in the strong tag
                    while (newNode.firstChild && newNode.firstChild.nodeType != 3) {
                        newNode = newNode.firstChild;
                    }
                    editor.getSelection().moveToElementText(newNode);
                } else {
                    if (element.innerHTML.match(/^\s*$/) || element.innerHTML == "<br>") {
                        element.innerHTML = "&nbsp;";
                    }
                }
            }
        </script>


    All the best,
    Rumen
    the Telerik team
    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 their blog feed now.
Back to Top