The issue is as we are deleting the entire line which contains bullets, it doesn't delete the bullets. We are using server side AcceptTrackChanges() method and it keeps the background color of the deleted lines. 

ASPX

<telerik:RadEditor RenderMode="Lightweight" ID="RadEditor1" EnableTrackChanges="true" runat="server" Width="750px"
    Height="400px" ToolsFile="~/ToolsFile.xml">
    <TrackChangesSettings Author="RadEditorUser" CanAcceptTrackChanges="true" UserCssId="reU0"></TrackChangesSettings>
    <Content>
        <ol>
            <li>test
            <ol>
                <li>test2</li>
            </ol>
            </li>
            <li>test3</li>
        </ol>
    </Content>
</telerik:RadEditor>
<asp:Button Text="Get Content" OnClick="GetContent" runat="server" />
<br />
EditorWithoutTracking:<br />
<asp:TextBox runat="server" id="EditorWithoutTracking" TextMode="MultiLine" Width="1000px" Height="500px"/><br />
EditorWithTracking:<br />
<asp:TextBox runat="server" id="EditorWithTracking" TextMode="MultiLine" Width="1000px" Height="500px"/>

Codebehind

    protected void GetContent(object sender, EventArgs e)
    {
        EditorWithoutTracking.Text = RadEditor1.Content;
        RadEditor1.AcceptTrackChanges();
        EditorWithTracking.Text = RadEditor1.Content;
    }

I have an issue when I line break in RADEditor but it keeps going to the bottom of the line in Internet Explorer v11.

Please note that the issue is reproducible on Telerik Demo site.

Steps to reproduce the issue:

Copy and paste the following content in HTML mode 

Some content
<br />
<br />
Put the cursor in the beginning of this line, press Backspace and after that Enter
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Switch to Design panel
Press Backspace twice in front of the text "Put the cursor in the beginning of this line, press Backspace and after that Enter"
Press Enter
Result

The content jump to the bottom of the line


See the attached video for more information.

If RadEditor is initially hidden with display:none, its tools do not work when displayed in Firefox 62.0:

<div style="display: none" id="hiddenWrapper">
    <telerik:RadEditor ID="RadEditor1"  runat="server"></telerik:RadEditor>
</div>
<script>
    function f() {
        $get('hiddenWrapper').style.display = "block";
      }
    Sys.Application.add_load(f);
</script>


There is a warning error in the console: "Mutation Events is deprecated and to use MutationObserver".

The fix is to call the $find("RadEditor1").onParentNodeChanged(); method to recreate the content area:

<div style="display: none" id="hiddenWrapper">
    <telerik:RadEditor ID="RadEditor1"  runat="server"></telerik:RadEditor>
</div>
<script>
    function f() {
        $get('hiddenWrapper').style.display = "block";
        $find("RadEditor1").onParentNodeChanged();
    }
    Sys.Application.add_load(f);
</script>

Likely to happen when an element is empty, not just the editor, if you can get the cusros in an empty <p>, and press backspace you can get the same behavior, it can happen as you work on some content

Steps to reproduce:

1. Go to the Editor demo page http://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx in Chrome
2. CTRL+A on the editor and hit delete
3. Hit Delete or Backspace again

Result: Uncaught TypeError  Cannot read property 'nodeType' of undefined Appears in the console

I know that there are articles that describe how to detect that the user has interacted with the RadEditor, but checking whether the content has changed is quite another task.
I understand that the underlying storage method makes it almost impossible to compare, but that's why we need the control to do this internally.
Even if we fall short of comparing the content, at least build-in the workarounds into the control to invoke a single "Changing" event.

The image manager dialog do not resize properly in Chrome when the screen resolution is 1920x1080 and the Windows zoom level is 125%-150%-175%.

In Internet Explorer, all dialogs have scrolls - tested on 4k screen with 150% zoom.

See the attachments.

Workaround:

<script>
    function OnClientCommandExecuted(editor, args) {
        if (editor.get_dialogOpener()) {
            var commandName = args.get_commandName();

            if (editor.get_dialogOpener()._getDialogContainer) {
                dialogReference = editor.get_dialogOpener()._getDialogContainer(commandName);
                setTimeout(function () {
                    var dialogContainerHeight = parseInt(editor.get_dialogOpener()._getDialogContainer(commandName).get_contentElement().style.height);
                    dialogReference.set_height(dialogContainerHeight + 40);
                    dialogReference.get_contentElement().removeAttribute("style");
                    dialogReference.get_contentElement().style.height = dialogContainerHeight + 5 + "px";
                          
                }, 1000);
                        
            }
        }
    }
</script>
<telerik:RadEditor ID="RadEditor1" runat="server"  OnClientCommandExecuted="OnClientCommandExecuted">
    <ImageManager ViewPaths="~/" />
</telerik:RadEditor>

Can be reproduced with the code below:

<telerik:RadEditor runat="server" ID="RadEditor1" >
    <Content>
   Here is sample content!
    </Content>
</telerik:RadEditor>
 
<input type="button" value="Set Focus On RadEditor" onclick="SetFocusOnRadEditor(); return false;" />
<script type="text/javascript">
    function SetFocusOnRadEditor() {
        var editor = $find("<%=RadEditor1.ClientID%>"); //get a reference to RadEditor client object
            editor.setFocus(); //set the focus on the the editor
    }
</script>


The problem is not reproducible when the ContentAreaMode is set to DIV or in the other browsers.

Workaround

<telerik:RadEditor runat="server" ID="RadEditor1">
    <Content>
    Here is sample content!
    </Content>
</telerik:RadEditor>
 
<button type="button"  onclick="SetFocusOnRadEditor()">Focuse On RadEditor</button>
<script type="text/javascript">
    function SetFocusOnRadEditor() {
        var editor = $find("<%=RadEditor1.ClientID%>");
        if ($telerik.isChrome) {
            var iframe = editor.get_contentAreaElement();
            iframe.contentWindow.document.body.focus();
        }
        else {
                editor.setFocus();
        }
    }
</script>

We have an issue with paragraph styles which have some custom classes.
It has different behavior depending on how you select your paragraph.
In some cases, when you fully select your paragraph the class remains the same the previous paragraph.
Please see the video of issue reproducing on the Telerik demo for more details:
https://www.screencast.com/t/xg9b1imVO

Workaround:
<script type="text/javascript">
    function OnClientCommandExecuting(editor, args) {
        //The command name   
        var commandName = args.get_commandName();
        //The tool that initiated the command   
        if (commandName == "FormatBlock") {
            //editor.get_document().execCommand("FormatBlock", false, "div");
            var selectedElement = editor.getSelectedElement();
            if (selectedElement.getAttribute("style")) {
                selectedElement.removeAttribute("style");
            }
            else if (selectedElement.getAttribute("class")) {
                selectedElement.removeAttribute("class");
            }
        }
    }
</script>
<telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1" ToolsFile="Tools.xml" Width="800px" OnClientCommandExecuting="OnClientCommandExecuting">
    <Content>
            some plain text
    </Content>
    <CssFiles>
        <telerik:EditorCssFile Value="Styles.css" />
    </CssFiles>
</telerik:RadEditor>

If misspelled word is coming after scroll bar it is not focusing in IE11, Edge and Chrome.

Can be reproduced in the default demo - https://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx

Paste the following content 

<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p>risksss</p>

and click on the spell check button. The popup with the suggestions will be positioned outside of the content area.

As a workaround you can switch to DIV content area mode - https://demos.telerik.com/aspnet-ajax/editor/examples/contentareamodediv/defaultcs.aspx

Repro steps: 
- use the editor below and the attached Word document in the archive at the end
- copy the document content in the editor
- clean the word formatting
- select some of the content (e.g., one paragraph)
- click the format stripper dropdown and choose Strip Span Elements
- run get_html(true) in the console

Expected: spans are stripped only from the selected content

Actual: nothing is stripped. Changing to HTML mode and back to Design fixes this, so you should not use that to check the HTML

        <telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1">
            <Tools>
                <telerik:EditorToolGroup>
                    <telerik:EditorTool Name="FormatStripper" />
                </telerik:EditorToolGroup>
            </Tools>
        </telerik:RadEditor>


WORKAROUNDS:

For the majority of cases you can set up automatic stripping of span elements when pasting from Word, so your users do not need to do that themselves. Here is an example:

<telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1"
    StripFormattingOptions="ConvertWordLists, MSWordNoMargins, Span">
    <Tools>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="FormatStripper" />
        </telerik:EditorToolGroup>
    </Tools>
</telerik:RadEditor>

You can read more on how stripping MS Word content works in the following demo, and play around with the various options to see what works best for your case: http://demos.telerik.com/aspnet-ajax/editor/examples/cleaningwordformatting/defaultcs.aspx and in the following documentation article: https://docs.telerik.com/devtools/aspnet-ajax/controls/editor/managing-content/pasting-content/clean-ms-word-formatting

There are also two possible code workarounds so advanced users can retain more control over the HTML without switching to the HTML mode themselves.
The second is likely to be a tad faster with large content, but the first is likely to produce better user experience.

1) this changes the mode to HTML and back to design with each paste so that the stripping tool can work with the selection


<telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1"
     OnClientCommandExecuted="OnClientCommandExecuted">
    <Tools>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="FormatStripper" />
        </telerik:EditorToolGroup>
    </Tools>
</telerik:RadEditor>
<script>
    function OnClientCommandExecuted(sender, args) {
        if (args.get_commandName() == "Paste") {
            sender.set_mode(2);
            setTimeout(function () {
                sender.set_mode(1);
            }, 50);
        }
    }
</script>

2) this one is a workaround that allows the stripping tool to work without mode change, but it will not operate with the selection but with all the content


<telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1"
     OnClientCommandExecuting="OnClientCommandExecuting">
    <Tools>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="FormatStripper" />
        </telerik:EditorToolGroup>
    </Tools>
</telerik:RadEditor>
<script>
    function OnClientCommandExecuting(sender, args) {
        if (args.get_commandName() == "StripSpan") {
            sender.set_html(sender.get_html(true));
        }
    }
</script>

You can get the same behavior that all other browsers get - focus being after the table. This is done easily by clearing out the following function logic (make sure the script is after the script manager):

<script>
   Telerik.Web.UI.Editor.TableDeleteRow.prototype.selectAnotherRow = function () { }
</script>

You can also try the following version of the function that attempts to fix the selection collapse after the DOM changed:

<script>
Telerik.Web.UI.Editor.TableDeleteRow.prototype.selectAnotherRow = function (layoutBuilderEngine) {
    if ($telerik.isIE9Mode) {
        var arStateIndexes = layoutBuilderEngine._getLeftTopStateIndexes(layoutBuilderEngine._selectedRowIndex, layoutBuilderEngine._selectedCell.cellIndex);
        var stateRow = arStateIndexes["rowIndex"];
        var nextCell = layoutBuilderEngine._getSelectedTableCellByStateIndexes(stateRow + 1, 0);
        var prevCell = layoutBuilderEngine._getSelectedTableCellByStateIndexes(stateRow - 1, 0);
        var newSelectedCell = nextCell || prevCell;
        if (newSelectedCell) {
            var editorSelection = this.get_editor().getSelection();
            setTimeout(function () {
                try {//the DOM change is likely to cause errors after the fixes, hence the try-catch, the timeout is to let the DOM get changed before tampering with the selection
                    if ($telerik.$(newSelectedCell).is(':visible')) {//for deleting footer cells
                        editorSelection.selectElement(newSelectedCell);
                        editorSelection.moveToElementText(newSelectedCell);//to properly move focus
                        editorSelection.collapse(true);
                    }
                }
                catch (ex) { }
            });
        }
    }
}
</script>


Considering the drawbacks of fixing IE code that is also inconsistent with other browsers, it is possible that the final fix will be to remove the function and have the same behavior as in other browsers.

Hello,

There seems to be an issue with the "Strip Span Elements" tool when pasting content into the editor in Design mode.

I have made a screencast demonstrating the issue available here: https://www.screencast.com/t/1OZ1huYPde8H

Reproduce:

Open a RadEditor demo that has the "Strip Span Elements" option like the Overview(https://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx) or the Right Editor in this demo(https://demos.telerik.com/aspnet-ajax/editor/examples/cleaningwordformatting/defaultcs.aspx).

In a word document create text that when pasted into the editor has spans, for example changing the background color or the text color. 

Copy the text from the document into the "Design" mode of the editor.
Select the text you would like to strip span's from (I used all of the text in the screencast example).

Use the "Strip Span Elements" button.

Switch the editor mode to HTML(The spans are not stripped).

Switch back to design mode.

Select the text you would like to remove spans from again.

Use the "Strip Span Elements" button. The spans are now stripped.
 


Expected result: Strip Span Elements option removes <span> tags from html directly after pasting into design mode.

Actual result: Strip Span Elements option does not remove <span> tags on pasted text in the design mode until you navigate to HTML mode then back to design mode.
 
Any help and suggestions are appreciated.

Thanks,

Calvin Williams

When there is a hidden <tfoot> element in the table, the Delete Row command in the editor context menu cannot delete the last row in IE. Works with other rows and other browsers.

WORKAROUND: use visibility: collapse for the footer rows instead of dispay:none for the footer

Repro steps:
- Use the markup attached below
- right click the last row in any table
- choose Row > Delete Row 

Expected: row is always deleted

Actual: in IE you cannot delete the last row of the second table

The content of RadEditor does not get styled in div mode in IE11. The styling tag is added before the selected content, instead of around it (e.g. strong tag).

https://www.screencast.com/t/HoqeLyeZX

Steps to reproduce:
1. Open in IE11:  https://demos.telerik.com/aspnet-ajax/editor/examples/contentareamodediv/defaultcs.aspx
2. Clear whole content and write some new symbols
3. Try to style the new content (e.g. make it bold)

Below is my steps to find this issue:

1. Open the browser with IE 10 mode or genuine IE10.
2. Create a table with Editor.
3. Right click the table and then select table properties. Then click Table Layouts tab and select a style.
4. Click OK, the style can be kept this moment in Design tab.
5. Click HTML tab and find the CSS details are missing and click Design tab again, the style cannot be kept.
6. There is no reproduces with chrome or IE 11. 
7. I also test this case from your ow site https://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx


A video repro is also attached

This behavior can be observed in your production demo page of the RadEditor.

http://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx

Reproduction Steps:

1. Scroll to the table under "Attractions"

2. Right click and select "Table Properties"

3. Select the "Image Manager" next to the "Back Image" textbox

4. Select anyone of your images,  I have reproduced with any of the images select "beach.jpg"

5. Click OK.  The image is now visible in the table.

6. Right click on nay cell in the table and select "Cell Properties"

7. You can make a change, or not to the cell properties, and click "OK" button at the bottom.

8. You will now see that the background image is no longer present on the table.

If you try step 8 again, and click on the "Table Properties" tab of the Table Wizard, you will see that there is no value in the "Back Image", so the "OK" is submitting the blank value.

Create a new word file and insert an empty table with a few cells in it. Go to Import and Export to DOCX and import the Word document. Click on a cell and the cursor will go into the next one on its right side.

Here is the generated content from the imported table:

<table class="TelerikTableNormal TelerikTableGrid" style="width: 0px;">

    <colgroup><col /><col /><col /><col /></colgroup>
    <tbody>
        <tr>
            <td style="padding: 0px 7.68px 0px 7.68px;width: 151px;" class="TelerikTableNormal TelerikTableGrid">
            <p class="TelerikNormal"></p>
            </td>
            <td style="padding: 0px 7.68px 0px 7.68px;width: 151px;" class="TelerikTableNormal TelerikTableGrid">
            <p class="TelerikNormal"> </p>
            </td>
            <td style="padding: 0px 7.68px 0px 7.68px;width: 151.066666666667px;" class="TelerikTableNormal TelerikTableGrid">
            <p class="TelerikNormal"> </p>
            </td>
            <td style="padding: 0px 7.68px 0px 7.68px;width: 151.066666666667px;" class="TelerikTableNormal TelerikTableGrid">
            <p class="TelerikNormal"> </p>
            </td>
        </tr>
        <tr>
            <td style="padding: 0px 7.68px 0px 7.68px;width: 151px;" class="TelerikTableNormal TelerikTableGrid">
            <p class="TelerikNormal"> </p>
            </td>
            <td style="padding: 0px 7.68px 0px 7.68px;width: 151px;" class="TelerikTableNormal TelerikTableGrid">
            <p class="TelerikNormal"> </p>
            </td>
            <td style="padding: 0px 7.68px 0px 7.68px;width: 151.066666666667px;" class="TelerikTableNormal TelerikTableGrid">
            <p class="TelerikNormal"> </p>
            </td>
            <td style="padding: 0px 7.68px 0px 7.68px;width: 151.066666666667px;" class="TelerikTableNormal TelerikTableGrid">
            <p class="TelerikNormal"> </p>
            </td>
        </tr>
        <tr>
            <td style="padding: 0px 7.68px 0px 7.68px;width: 151px;" class="TelerikTableNormal TelerikTableGrid">
            <p class="TelerikNormal"> </p>
            </td>
            <td style="padding: 0px 7.68px 0px 7.68px;width: 151px;" class="TelerikTableNormal TelerikTableGrid">
            <p class="TelerikNormal"> </p>
            </td>
            <td style="padding: 0px 7.68px 0px 7.68px;width: 151.066666666667px;" class="TelerikTableNormal TelerikTableGrid">
            <p class="TelerikNormal"> </p>
            </td>
            <td style="padding: 0px 7.68px 0px 7.68px;width: 151.066666666667px;" class="TelerikTableNormal TelerikTableGrid">
            <p class="TelerikNormal"> </p>
            </td>
        </tr>
        <tr>
            <td style="padding: 0px 7.68px 0px 7.68px;width: 151px;" class="TelerikTableNormal TelerikTableGrid">
            <p class="TelerikNormal"> </p>
            </td>
            <td style="padding: 0px 7.68px 0px 7.68px;width: 151px;" class="TelerikTableNormal TelerikTableGrid">
            <p class="TelerikNormal"> </p>
            </td>
            <td style="padding: 0px 7.68px 0px 7.68px;width: 151.066666666667px;" class="TelerikTableNormal TelerikTableGrid">
            <p class="TelerikNormal"> </p>
            </td>
            <td style="padding: 0px 7.68px 0px 7.68px;width: 151.066666666667px;" class="TelerikTableNormal TelerikTableGrid">
            <p class="TelerikNormal"> </p>
            </td>
        </tr>
    </tbody>
</table>
<p class="TelerikNormal"> </p>


The problem is related to the empty paragraph elements: <p class="TelerikNormal"></p>. If there is some content or an empty space <p class="TelerikNormal">&nbsp;</p> the problem is not reproducible.

When the Track Changes is enabled and a <p> element contains nothing but whitespace (newline, space or tab characters), any time one character is deleted, the entire element is deleted 

Another issue relating to this, is that when the line is deleted, if there is another whitespace <p> element above the element, the cursor is placed not on that line, but on whatever line is next without any whitespace. 

This behavior can be reproduced in the track-changes demo (Found at https://demos.telerik.com/aspnet-ajax/editor/examples/trackchanges/defaultcs.aspx ) ,by following these steps:

1. Create a <p> element containing some text
2. Below this element, create 3 more containing nothing but whitespace
3. On the last line enter a space and then press the backspace key

The cursor will be moved to the <p> element containing text and the entire element will be deleted (not just the space which was entered)

The problem can be reproduced on the track changes demo at https://demos.telerik.com/aspnet-ajax/editor/examples/trackchanges/defaultcs.aspx


1. Copy a list from word (Bullet or numbered doesn't matter, but numbered is more problematic)
2. Paste into the content area with track changes turned on
3. Apply Bold, Underline or Italics to the pasted list


Result:
The list seems to break itself into 3 separate lists all spaced further apart than initially. Numbered lists will go from 1,2,3 to having 1,1,1. 

RadEditor does not offer resx localization for the following Track Changes strings "Inserted by ", "Formatted by ", "Deleted by " as well as for the strings in the Comments dialog: Title, Save, Cancel and Edit.