Radeditor add extra elements when use backspace key

[Judy.Wang]

Hi Telerik team,

Some of our customers are experiencing span or br tags being added into the HTML when they are backspacing to adjust space or combine paragraphs. It happens on Chrome and Firefox browsers only ( please see attachments for HTML ).

Chrome browser:
Span tag is added automatic if you use backspace key to combine paragraphs. “<span style="???;">”, style can be background color, font size of or letter spacing. We cannot reproduce it on Telerik demo site.

Firefox browser:
If you combine the last paragraph, <br class="t-last-br" /> will added in the paragraph element. This issue can reproduce it on Telerik demo site too.

We tried a few things but we still cannot solve it.
   1. We tried version 2020.2.617.40 and 2020.3.1021
   2. Set rendermode to classic or lightweight
   3. Force to clear all Editor css files ( radEditor.CssFiles.Clear() );
   4. Changed new line mode to P, BR and div

 

Please be advised if there a solution for it!

Thanks in advance,

 

Lan

[Rumen]

Hi Lan,

Happy New Year!

Please take a look at the following KB article which discusses the Chrome problem and provides a solution for its undesired behavior - Style is inserted in text when deleting paragraph tag.

The solution for the Firefox problem should be identical too, e.g.

Set the CssFiles property to point to an empty css file:

<telerik:RadEditor runat="server" ID="RadEditor1" ContentAreaMode="iframe">
    <CssFiles>
        <telerik:EditorCssFile Value="~/Empty.css" />
    </CssFiles>
</telerik:RadEditor>

If you continue to receive <br class="t-last-br" /> tags you can easily strip them with the following custom filter:

<telerik:RadEditor ID="RadEditor1" ContentFilters="none" OnClientLoad="OnClientLoad" runat="server">
    <Content><ul>
        <li>test<br class="t-last-br" />
        </li>
    </ul></Content>
</telerik:RadEditor>
 
<script type="text/javascript">
    function OnClientLoad(editor, args) {
        editor.get_filtersManager().add(new RadEditorCustomFilter());
    }
    RadEditorCustomFilter = function () {
        RadEditorCustomFilter.initializeBase(this);
        this.set_isDom(false);
        this.set_enabled(true);
        this.set_name("RadEditor filter");
        this.set_description("RadEditor filter description");
    }
    RadEditorCustomFilter.prototype =
    {
        getHtmlContent: function (content) {
            if (Telerik.Web.Browser.ff) {
                newContent = content.replace(/<br class=\"t-last-br\">/gi, '');
            }
            return newContent;
        }
    }
    RadEditorCustomFilter.registerClass('RadEditorCustomFilter', Telerik.Web.UI.Editor.Filter);
</script>

The filter is executed when switching to HTML mode and when submitting the content.

 

Regards,
Rumen
Progress Telerik

[miksh]

How to fix it if we need to use the custom css files?

<telerik:RadEditor runat="server" ID="RadEditor1" ContentAreaMode="iframe">
    <CssFiles>
        <telerik:EditorCssFile Value="~/WeNeedThisCustomFile.css" />
        <telerik:EditorCssFile Value="~/ThisFileToo.css" />
    </CssFiles>
</telerik:RadEditor>

[Rumen]

In this case make sure that the font-size is specified in pixels but not in pt (points), e.g.

WeNeedThisCustomFile.css

p {
    font: 12px Arial !important;
    color: red;
}

Here you go a video demonstration of the proposed solution: http://youtu.be/ZMcrmZgT1Cc?hd=1. 

[Judy.Wang]

Thank you Rumen!

[Judy.Wang]

Hi Rumen,

Is there possible Editor will not automatic add extra elements in feature versions? 

Regards,

Lan

[Rumen]

Hi Lan,

Thank you for the good question.

It would be great if the issue can be handled in the RadEditor source code but unfortunately the <span style="???;"> problem is a browser one and it can be fixed/improved only by the Chrome developers.

The remedy that we can currently provide is to set the CssFiles property to point to an empty CSS file to avoid the default browser behavior.

Best Regards,
Rumen
Progress Telerik

[Judy.Wang]

Thank you Rumen!

[Judy.Wang]

Hi Rumen,

Thank you for your explanation and patience!

If I understand correctly this issue is caused by a browser itself so there is nothing we can do except two workarounds you mentioned before. But both workarounds are difficult for us because there are more than ten thousands customers using our product with different CSS and also we supports both IFrame and inline editing to them. And actually, we use another rich editor, CKEditor in our product. We use CKEditor which is used for customers to build and customize html forms. We don't want to use two rich editors in our product but we don't have a choice because when a user edits html content when building a html form Telerik Editor adding extra inline CSS so we have to use CKEditor because the html created by CKEditor is more clean and there are not extra inline CSS there.

For the issue we found, we tested it in CKEditor also and it works as expected without extra CSS there.

Please feel free to let me know if you have any suggestions and solutions.

 

Regards,

 

Allan

[Rumen]

Hi Allan,

According to the posts in this CKEditor bug item on the matter, the issue is a browser one and as per the last post it still persists - https://dev.ckeditor.com/ticket/9998. 

All workarounds revolve around not loading the CKEditor default styles in the editor's content area or to override the default line-height which can be done in RadEditor too - see here.

Another solution provided there is to override the backspace key 

$("#editor").on('keyup',function(e){
        if(e.keyCode===8){
          var node=editor.getSelection().getRanges()[0].endContainer.$.nextSibling;
          if (node.tagName === "SPAN"){
            $(node).replaceWith($(node).contents());
          }
        }
});

This can be done in RadEditor too as shown in the documentation:

• https://docs.telerik.com/devtools/aspnet-ajax/controls/editor/client-side-programming/methods/attacheventhandler 
• https://docs.telerik.com/devtools/aspnet-ajax/controls/editor/client-side-programming/methods/getselection

I hope that you'll find this information useful.

Best Regards,
Rumen
Progress Telerik

[Rumen]

Another solution for this browser behavior that I would suggest is the following one:

<script>
function OnClientLoadEditor(sender, args) {
    var $ = $telerik.$;
    sender.attachEventHandler('onkeyup', function (e) {

        if (e.keyCode === 8 || e.keyCode === 46) {

            var range = sender.get_document().getSelection().getRangeAt(0);
            var endContainer = range.endContainer;
            var nodeNextSibling = endContainer.nextSibling;

            if (endContainer.parentNode.tagName.toLowerCase() === "span") {
                $(range.endContainer.parentNode).replaceWith($(endContainer));
            }

            else if (nodeNextSibling.tagName.toLowerCase() === "span") {
                $(nodeNextSibling).replaceWith($(nodeNextSibling).contents());


            }
        }
    });
}
</script>
<telerik:RadEditor runat="server" ID="RadEditor6" EditType="Inline" CssClass="radEditor" OnClientLoad="OnClientLoadEditor">
   <Content>
      <p>test</p><p>test</p>			
   </Content>
</telerik:RadEditor>
<telerik:RadEditor runat="server" ID="RadEditor1"
    OnClientCommandExecuted="OnClientCommandExecuted" OnClientLoad="OnClientLoadEditor"
    RenderMode="Lightweight"
    NewLineMode="P"
    AutoResizeHeight="true">
    <Content>
</Content>
</telerik:RadEditor>

 

Regards,
Rumen
Progress Telerik