editor adds 3 br on chrome

13 posts, 0 answers
  1. ido nahmias
    ido nahmias avatar
    64 posts
    Member since:
    May 2006

    Posted 18 Dec 2013 Link to this post

    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,
  2. Ianko
    Admin
    Ianko avatar
    1934 posts

    Posted 20 Dec 2013 Link to this post

    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
    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.
  3. ido nahmias
    ido nahmias avatar
    64 posts
    Member since:
    May 2006

    Posted 23 Dec 2013 Link to this post

    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).

  4. Ianko
    Admin
    Ianko avatar
    1934 posts

    Posted 24 Dec 2013 Link to this post

    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
    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.
  5. ido nahmias
    ido nahmias avatar
    64 posts
    Member since:
    May 2006

    Posted 25 Dec 2013 Link to this post

    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,

  6. Ianko
    Admin
    Ianko avatar
    1934 posts

    Posted 27 Dec 2013 Link to this post

    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
    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.
  7. ido nahmias
    ido nahmias avatar
    64 posts
    Member since:
    May 2006

    Posted 27 Dec 2013 Link to this post

    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,

     
  8. Stanimir
    Admin
    Stanimir avatar
    1654 posts

    Posted 01 Jan 2014 Link to this post

    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
    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.
  9. ido nahmias
    ido nahmias avatar
    64 posts
    Member since:
    May 2006

    Posted 01 Jan 2014 Link to this post

    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">
     
    <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,
  10. Ianko
    Admin
    Ianko avatar
    1934 posts

    Posted 06 Jan 2014 Link to this post

    Hello Ido,

    Can you please try the following workaround and let me know if it works fro your case:
    <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
    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.
  11. ido nahmias
    ido nahmias avatar
    64 posts
    Member since:
    May 2006

    Posted 06 Jan 2014 Link to this post

    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.

  12. Ianko
    Admin
    Ianko avatar
    1934 posts

    Posted 08 Jan 2014 Link to this post

    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
    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.
  13. ido nahmias
    ido nahmias avatar
    64 posts
    Member since:
    May 2006

    Posted 08 Jan 2014 Link to this post

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