Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

New lines content in IE and Chrome

6 Answers 178 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Roman
Top achievements
Rank 1
Roman asked on 29 Mar 2012, 08:00 AM
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

6 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 02 Apr 2012, 02:10 PM
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.
0
Kiran
Top achievements
Rank 1
answered on 03 Apr 2012, 08:16 AM
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
0
Rumen
Telerik team
answered on 03 Apr 2012, 01:15 PM
EditableIFRAME.zip
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.
0
Kiran
Top achievements
Rank 1
answered on 03 Apr 2012, 02:18 PM
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

0
Kiran
Top achievements
Rank 1
answered on 05 Apr 2012, 01:23 PM
Hello Rumen,

Sorry to chase you. But have you found anything?

Kiran
0
Rumen
Telerik team
answered on 05 Apr 2012, 03:21 PM
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.
Tags
Editor
Asked by
Roman
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Kiran
Top achievements
Rank 1
Share this question
or