editor adds 3 br on chrome

[ido nahmias]

Hello,

Edtior adds 3  br in chrome (doesn't happen on IE).

I am doing the following scenario:

<table id="tbl" border="1">        
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>      
</table>


 <div id="editorTextFile">
        <telerik:RadEditor ID="RadEditor1" runat="server" width="100%" Height="100%" ></telerik:RadEditor>
 </div>
<script type="text/javascript">
         $telerik.$(function () {
             $telerik.$("#tbl tr td").click(function () {
                 var editor = $find("<%=RadEditor1.ClientID%>");
                 var content = $(this).html(); //copy cell info
                 $(this).html(""); //clear cell
                 editor.set_html(content); //copy cell info
                 $telerik.$(this).append($telerik.$("#editorTextFile"));
                 $find("<%= RadEditor1.ClientID %>").onParentNodeChanged();
             });
         });

</script>

After clicking on one of the cells in the table, 3 br were added to the editor.

I am working on telerik version: 2013.2.717.40.

*I checked the same scenario on old telerik version: 2010.1.415.20 and it worked fine.

Thanks,

[Ianko]

Hello Ido,

I can confirm that the described behavior is a bug. You can track the status of the logged item by following this feedback portal item, in which you can also vote or comment.

As appreciation for this report I am updating your Telerik points.

The encountered problem is because of the onParentNodeChanged() method, it appears that in order to calculate correctly the layout of the editor, it adds a BR element to initialize the first row and resise correctly the content height.

A possible workaround is using a custom filter, the logic of which removes the additional BR elements. Additionally note that you can trigger the filters automatically by using this line of code:

editor.set_html(editor.get_html(true));

You can examine this example, which is made accordingly to the provided setup:

<table id="tbl" border="1">
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>


<div id="editorTextFile">
    <telerik:RadEditor ID="RadEditor1" runat="server"
        OnClientLoad="OnClientLoad">
    </telerik:RadEditor>
</div>
<script type="text/javascript">
    $telerik.$(function () {
        $telerik.$("#tbl tr td").click(function () {
            var editor = $find("<%=RadEditor1.ClientID%>");
            var content = $(this).html(); //copy cell info
            $(this).html(""); //clear cell
            editor.set_html(content); //copy cell info
            $telerik.$(this).append($telerik.$("#editorTextFile"));
            var editor = $find("<%= RadEditor1.ClientID %>");

            // Fix visual issues with the editor along with the
            // workaround for the BR elements
            repaintAndremoveBrs(editor);
        });
    });

    function repaintAndremoveBrs(editor) {
        editor.onParentNodeChanged();

        // With this line of code all the content filters are
        // being invoked and forced to clean the content
        editor.set_html(editor.get_html(true));
    }

    /* Custom content filter that strips the additional BR elements */
    function OnClientLoad(editor, args) {

        if(!$telerik.isIE) // Register the filter if the browser is not IE
            editor.get_filtersManager().add(new RemoveBrs());
    }

    RemoveBrs = function () {
        RemoveBrs.initializeBase(this);
        this.set_isDom(true);
        this.set_enabled(true);
        this.set_name("Remove Brs");
        this.set_description("Removes all additional Br elements from the content.");
    }

    RemoveBrs.prototype = {
        getHtmlContent: function (content) {
            var newContent = content;
            var lastBr = content.lastChild
            while (lastBr && lastBr.tagName === "BR") {
                content.removeChild(lastBr);
                lastBr = content.lastChild
            }
            return newContent;
        },
    }
    RemoveBrs.registerClass('RemoveBrs', Telerik.Web.UI.Editor.Filter);
</script>

Let me know if you need further information about this matter.

Regards,
Ianko
Telerik

[ido nahmias]

Thanks for the quick reply but unfortunately the provided workaround didn't work, now I have 2 br instead of 3.

Furthermore, I tried to work with your code and to make it work but with no luck, this is what I did:

1. I changed the "this.set_isDom(true);" to "this.set_isDom(false);"

2.  I changed the to while (lastBr && lastBr.tagName === "BR") {
while (lastBr && (lastBr.tagName === "BR" || lastBr.nodeValue=="\n")) { - because I found out that there is an enter character.

After making the following changes, you can notice that the return content from the filter is empty (without br) but eventually in the editor there are still 2 br (using inspect element you can see the added 2 br).

[Ianko]

Hi Ido,

I can only try to make assumptions on the reasons why this filter is not working on your end. You can examine this screencast, in which is shown how I am resolving it on my end.

Additional I would like to point out that the last BR is removed by the ConvertToXHTML filter and this is why after the set modification are working. As you can see in the screencast even without any custom filter the last BR is being removed.

The modification done to the filter are causing it to malfunction, I can only guess why the isDom is set to false. When this attribute is changed, the filter is handling ordinary string values and not DOM objects. By doing that you should be unable to use DOM operations. If the isDom is set to false, you should use string manipulations or RegEx ones.

As a last note, about the /n character is one that should be read from the code behind. Currently I can only make assumptions on why this character is in a node as a text value. Please check if there is any customization that could lead to the insertion of such node. I can assure you that the editor does not implements such logic.

Regards,
Ianko
Telerik

[ido nahmias]

Thanks for the screencast, but unfortunately the issue is not resolved yet.

1. You can see in your screencast that the last br isn't removed

2. Because I am using design edit mode (EditModes="design"), the br are not filtered from the editor (because I can't switch to html edit mode and then back to design edit mode as you did in the screencast.

Thanks,

[Ianko]

Hi Ido,

The last <br> should exist in the content of the editor, because its purpose is to be a selectable element for the next empty line. This <br> is vital for the RadEditor's editing behavior. 

If the problem is that the content is retrieved via the get_html() method and it is returned with the last br, then you can use this method with an argument value of true (get_html(true)). By that the content will be cleared by the filters and then returned correctly.

If this is not the problem, please get back to me with more details about your concern.

Regards,
Ianko
Telerik

[ido nahmias]

Hi,

Unfortunately it doesn't solve my problem and I will explain why:

Try to do exactly as you did in your screencast but without having the option to switch between the modes (html to design) because I am using only the design mode option.

<telerik:RadEditor ID="RadEditor1" runat="server"

        OnClientLoad="OnClientLoad" EditModes="design">

.

-> the action of switching from html to design deletes the br (you can see in your screencast once you enter the design mode without going throw the html option, there are 3 add br.

Thanks,

 

[Stanimir]

Hi,

Could you provide me with the code when you are retrieving the code of the editor? I will review it and provide you with a suitable solution.

Thank you.

Regards,
Stanimir
Telerik

[ido nahmias]

Hi,

This is the code, it is the same code as you submitted with only one change -> (EditModes="design"):

<telerik:RadEditor ID="RadEditor1" runat="server"

        OnClientLoad="OnClientLoad" EditModes="design">

    </telerik:RadEditor>

Scenario to reproduce:

1. Click on one of the cells (td) in the table
2. The editor is being moved inside the chosen td and 2 br were added to the editor.


My code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="telerikexample.WebForm1" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

 

<!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>

    <script src="jquery.js" type="text/javascript"></script>

    <style type="text/css">

         

     

     

       #tbl tr td

        {

            width:20px;

            height:20px;

        }

         

    </style>

</head>

<body>

    <form id="form1" runat="server">

   <table id="tbl" border="1">

    <tr>

        <td></td>

        <td></td>

    </tr>

    <tr>

        <td></td>

        <td></td>

    </tr>

    <tr>

        <td></td>

        <td></td>

    </tr>

</table>

<asp:ScriptManager ID="ScriptManager1" runat="server" />

  

<div id="editorTextFile">

 

    <telerik:RadEditor ID="RadEditor1" runat="server"

        OnClientLoad="OnClientLoad" EditModes="design">

    </telerik:RadEditor>

</div>

<script type="text/javascript">

    $telerik.$(function () {

        $telerik.$("#tbl tr td").click(function () {

            var editor = $find("<%=RadEditor1.ClientID%>");

            var content = $(this).html(); //copy cell info

            $(this).html(""); //clear cell

            editor.set_html(content); //copy cell info

            $telerik.$(this).append($telerik.$("#editorTextFile"));

            var editor = $find("<%= RadEditor1.ClientID %>");

  

            // Fix visual issues with the editor along with the

            // workaround for the BR elements

            repaintAndremoveBrs(editor);

        });

    });

  

    function repaintAndremoveBrs(editor) {

        editor.onParentNodeChanged();

  

        // With this line of code all the content filters are

        // being invoked and forced to clean the content

        editor.set_html(editor.get_html(true));

    }

  

    /* Custom content filter that strips the additional BR elements */

    function OnClientLoad(editor, args) {

  

        if(!$telerik.isIE) // Register the filter if the browser is not IE

            editor.get_filtersManager().add(new RemoveBrs());

    }

  

    RemoveBrs = function () {

        RemoveBrs.initializeBase(this);

        this.set_isDom(true);

        this.set_enabled(true);

        this.set_name("Remove Brs");

        this.set_description("Removes all additional Br elements from the content.");

    }

  

    RemoveBrs.prototype = {

        getHtmlContent: function (content) {

            var newContent = content;

            var lastBr = content.lastChild

            while (lastBr && lastBr.tagName === "BR") {

                content.removeChild(lastBr);

                lastBr = content.lastChild

            }

            return newContent;

        },

    }

    RemoveBrs.registerClass('RemoveBrs', Telerik.Web.UI.Editor.Filter);

</script>

    </form>

</body>

</html>

Thanks,

[Ianko]

Hello Ido,

Can you please try the following workaround and let me know if it works fro your case:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <style type="text/css">
        #tbl tr td {
            width: 20px;
            height: 20px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <table id="tbl" border="1">
            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
        </table>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />

        <div id="editorTextFile">

            <telerik:RadEditor ID="RadEditor1" runat="server" EditModes="design">
            </telerik:RadEditor>
        </div>
        <script type="text/javascript">
            $telerik.$(function () {
                $telerik.$("#tbl tr td").click(function () {
                    var editor = $find("<%=RadEditor1.ClientID%>");
                    var content = $(this).html(); //copy cell info
                    $(this).html(""); //clear cell
                    editor.set_html(content); //copy cell info
                    $telerik.$(this).append($telerik.$("#editorTextFile"));
                    var editor = $find("<%= RadEditor1.ClientID %>");

                    // Fix visual issues with the editor along with the
                    // workaround for the BR elements
                    repaintAndremoveBrs(editor);
                });
            });

            function repaintAndremoveBrs(editor) {
                editor.onParentNodeChanged();

                var content = editor.get_contentArea();
                var lastBr = content.lastChild
                while (lastBr && lastBr.tagName === "BR") {
                    content.removeChild(lastBr);
                    lastBr = content.lastChild
                }
            }
        </script>
    </form>
</body>
</html>

Regards,
Ianko
Telerik

[ido nahmias]

thanks for replyng.

Sorry but the workaround doesn't work for me because there is br added to the editor which causing to a mass in my case.

I will describe what I am doing with the editor in my case (may be it will help us solve this problem):

1. User clicks on the td, and the edtor is insert inside the td.

2. Once the user clicks on another td, the editor content is being insert to the current  td (not the new clicked td)

3. go to step 1 and so on.

* What happens, br is being added to the br that already exits in the editor -> causing to the br to multiply in the editor.

[Ianko]

Hello Ido,

Thank you for your reply, I can confirm that there has been some misunderstanding.

Until now I have been trying to assist you only on the introduced behavior that multiple <br> tags are inserted in the editors content and not to the custom solution that the editor content should be transferred into the <td> elements.

Nevertheless, as I have mentioned to strip the last <br> in the editor, you should get the text/data with the get_html(true) method. Note that the argument value should be true in order to retrieve the text after passing it through the editor's built-in content filters.

Note that the matter of this thread is related on the reported bug and the further implementation of the custom solution (to get/set content from/to the editor) should be implemented by the developer accordingly to the application's requirements.

Although, you can try testing the desired functionality by using the following example implementation:

<table id="tbl" border="1">
    <tr>
        <td>Some Content 1.1</td>
        <td>Some Content 1.2</td>
    </tr>
    <tr>
        <td>Some Content 2.1</td>
        <td>Some Content 2.2</td>
    </tr>
    <tr>
        <td>Some Content 3.1</td>
        <td>Some Content 3.2</td>
    </tr>
</table>
<asp:ScriptManager ID="ScriptManager1" runat="server" />

<div id="editorTextFile">

    <telerik:RadEditor ID="RadEditor1" runat="server" EditModes="design">
    </telerik:RadEditor>
</div>
<script type="text/javascript">
    var previousTd;

    $telerik.$(function () {
        $telerik.$("#tbl tr td").click(function () {
            var editor = $find("<%=RadEditor1.ClientID%>");
            var editorsContent = editor.get_html(true);
            var content = $(this).html();

            $(this).html("");
            editor.set_html(content);
            $telerik.$(this).append($telerik.$("#editorTextFile"));

            // Fix visual issues with the editor along with the
            // workaround for the BR elements
            repaintAndremoveBrs(editor);

            if (previousTd && editorsContent) {
                $(previousTd).html(editorsContent);
            }

            previousTd = this;
        });
    });

    function repaintAndremoveBrs(editor) {
        editor.onParentNodeChanged();

        var content = editor.get_contentArea();
        var lastBr = content.lastChild
        while (lastBr && lastBr.tagName === "BR") {
            content.removeChild(lastBr);
            lastBr = content.lastChild
        }
    }
</script>

If I am still mislead on the requested information or assistance, please collaborate with me and provide more detailed steps about the encountered difficulties with the RadEditor control.

Regards,
Ianko
Telerik

[ido nahmias]

It is working now.
Thank you very much, I appreciate your help.