There's a bug in the RadEditor WordListConverter convert method.  See the attached image for details.  Note that the variable z is initialized and treated as an array (a stack, actually, with its items being pushed in and popped out).  However, perhaps because of a naming scope failure in the js-minifier, the z variable is, under certain conditions, set equal to an HTMLCollection, so a subsequent z.push method call fails.

This sample Word document reproduces the error.  It is admittedly full of bad list formatting, because it began life as a PDF, but it does exercise the RadEditor code in a way that causes the problem.  Select and copy its content and paste it in the RadEditor demo page here:

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

Click OK to "clean" the pasted content and note that nothing appears because of the error shown in the attached image.

Verified in the latest Chrome and FF builds on Windows 10.

In RadEditor with Ribbon Bar Toolbar When we click  Type 1 Dropdown (Here "Font Name", "Real font size", "Foreground Color", "Background Color", "Apply CSS Class", "Paragraph Style" and "Undo") it is opened or expanded and if click on same expanded drop-down control it still remains open instead it should be closed(Toggle Behaviour) on any "Type 2" Dropdown then "Type 1" dropdown is still remaining open or expand.

Inconsistent Behavior of RadEditor with Ribbon Bar Toolbar for a different type of dropdown toolbar controls.

In RadEditor with Ribbon Bar Toolbar, there are two different types of drop-down control observed.

Type1 includes "Paste" and "Strip All Formatting" 
Type2 includes "Font Name", "Real font size", "Foreground Color", "Background Color", "Apply CSS Class", "Paragraph Style" and "Undo"


Issue1:
In RadEditor with Ribbon Bar Toolbar When "Type 1" Dropdown is opened or expanded and we click on any "Type 2" Dropdown then "Type 1" dropdown is still remain open or expand.

Issue2:
vice versa In RadEditor with Ribbon Bar Toolbar When "Type 2" Dropdown is opened or expanded and we click on any "Type 1" Dropdown then "Type 1" dropdown is still remain open or expand.

Right now the end user can resize the table cells only through the provided interface in the Table Wizard and Properties inspector module. It will be useful this to be enabled as resize handlers directly in the table as it is implemented in the Kendo Editor - https://demos.telerik.com/kendo-ui/editor/index.

After performing some tests with images using the RadEditor I have found that when selecting the class to apply in the image properties dialog, it will not let you clear the class. When choosing the clear class option from the drop down it does not change the class of the image it will keep the same class that is already applied from the drop down.

Hi,

As per title and I also find out it able to reproduce in the demo site: https://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx

Step:

1. Change to 'HTML' mode.

2. Open 'Find And Replace' dialog.

3. Enter a word to find and hit the 'Find' button.

Notice that the word does not get highlighted. It only happens in 'HTML' mode, 'Design' mode working fine.

Please help as this feature is very useful in my project.

Thank you.

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)