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.

1.       Visit the RadEditor demo at https://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx (I used Google Chrome.)

2.       In the HTML view, replace the entire demo text with

This <strong>strange</strong> thing

3.       In the Design view, place the cursor at the very end of the line, and press Shift+Left repeatedly.

a.       At first it will highlight the final letter correctly.

b.      Then it will UNHIGHLIGHT the final letter!

c.       Then it will begin highlight more letters again starting from the letter BEFORE the final letter.

d.      Then, after highlighting the “e” in strange, it will being UNHIGHLIGHTING starting from the righthand side of the selection!

e.      Then it will highlight left as far as the “s”.

f.        Then it will start UNHIGHLIGHTING from the right again!

g.       Then highlighting the space to the left

h.      Then UNHIGHLIGHTING the space to the left!

i.         Then highlighting to the left as far as the beginning of the line

j.        Then UNHIGHLIGHTING from the right side of the selection!

Pressing Shift+Left and Shift+Right should always modify only one end of the selection, and the other end should always remain where the selection was started. This is how Windows Notepad and virtually all other applications behave.

Please follow these steps to reproduce the issue:

1. Open RadEditor Demo: https://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx
2. Choose a word that is present in the text (e.g. "Barcelona").
3. Open "Find And Replace" dialog.
4. Click on the "Replace" tab.
5. Write "Barcelona" or any other chosen word in the "Find" field.
6. Write something in the "Replace With" field (e.g. "Replacement").
7. Select the "Up" Direction in "Search Options".
8. Click "Replace All".

Actual Result: The "The search string was not found." message is displayed and the substrings ("Barcelona") are not replaced.
Expected Result: All occurrences of the substring are replaced.

Note that this functionality seems to be working if the "Down" direction is chosen.
Update: I would like to add that the issue is not only with Replace All. The same bug is happening with "Replace" with both "Up" and Down" directions.

When setting the DialogsCssFile property, the generated markup of the RadEditor wrapper changes from 

Radeditor RadEditor_<MyCustomSkin> reWrapper

to

Radeditor <MyCustomSkin> reWrapper.



Since the custom skins generated through the Theme Builder requires the Radeditor RadEditor_<MyCustomSkin> reWrapper class syntax, they won't be applied to the RadEditor body.

The string <MyCustomSkin> is the name of the custom skin.


To fix the problem explicitly set the RenderMode property of RadEditor to "Lightweight", i.e.

<telerik:RadEditor RenderMode="Lightweight" DialogsCssFile="~/MyCustomSkin/DialogContents.css" ID="RadEditor1" runat="server" Skin="MyCustomSkin" EnableEmbeddedSkins="false">
            <ImageManager ViewPaths="~/" UploadPaths="~/" />
</telerik:RadEditor>

1. Inside the editor (http://demos.telerik.com/aspnet-ajax/editor) copy and paste the contents of the attached file.

2. When prompted to clean the pasted data, select Yes.

3. Visually inspect the order of the list elements and the indentation - see the screenshot in the attachment.

If you select the whole table along with some content and click BOLD, all table related tags will get wrapped by a <strong> tag. For instance tfoot, thead and so on will be wrapped with <strong>.

Initial content:

<table style="width: 0px;">
    <colgroup><col /><col /><col /></colgroup>
    <thead>
        <tr>
            <th>test</th>
            <th>test</th>
            <th>test</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>test</th>
            <th>test</th>
            <td>test</td>
        </tr>
        <tr>
            <th>test</th>
            <th>test</th>
            <td>test</td>
        </tr>
    </tbody>
</table>
<br />
test line beneath the table



Modified content:

   
<table style="width: 0px;">
<strong><colgroup><col /><col /><col /></colgroup></strong>
    <thead>
        <tr>
            <th><strong>test</strong></th>
            <th><strong>test</strong></th>
            <th><strong>test</strong></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th><strong>test</strong></th>
            <th><strong>test</strong></th>
            <td><strong>test</strong></td>
        </tr>
        <tr>
            <th><strong>test</strong></th>
            <th><strong>test</strong></th>
            <td><strong>test</strong></td>
        </tr>
    </tbody>
</table>
<strong>
<br />
test line beneath the table</strong>



Video reproduction in Chrome: https://www.screencast.com/t/lH3LJLKjmXb 

When adding formatting to texts while selecting whole elements, some elements are not included in `isBlockElement` function such as <col> or <colgroup> in a way those elements get wrapped in formatting tags such as <strong>

How to Reproduce:

   Create a table in editor

```html
  <span>Outside text</span>
  <table>
     <colgroup>
          <col></col>
     </colgroup>
    <tbody>
       <tr>
            <td>Inside text</td>
        </tr>
    </tbody>
  </table>
```

Select the inside text and outsite text in editor and click for applyng BOLD for instance.

colgroup tag gets wrapped in <strong> tags.

Some of html5 tags are missing from the isblockelement check as well such as 'article', 'aside', 'audio', 'canvas', 'details', 'figcaption', 'figure', 'footer', 'header', 'hgroup', 'nav', 'output', 'section', 'video'

I have a Telerik RadEditor (2017.3) control with custom/unembedded skin (created using the themebuilder on telerik), and when I enter a value for the DialogsCssFile attribute, the markup of the page changes, meaning that my custom skin is not applied to the editor anymore.

Why is this a problem? Well the css inside the dialog for Find/replace for example didn't display correct, and having done some research, I needed to do some @imports into a customDialog.css file and drop that into the DialogsCssFile attribute.

As soon as I do this, the generated markup in the page for RadEditor changes from

Radeditor RadEditor_MyCustomSkin reWrapper

to

Radeditor MyCustomSkin reWrapper

meaning that my radeditor Skin is not applied to the editor, If I remove the DialogCssFile then the editor skin loads correctly, but the dialogs look wrong. In the Page source, the Window is a div within the page, and not an iFrame

Code :

Page CSS files (in order)

<link type="text/css" rel="stylesheet" href="/assets/css/MyCustomSkin/formdecorator.MyCustomSkin.css" />
<link type="text/css" rel="stylesheet" href="/assets/css/MyCustomSkin/toolbar.MyCustomSkin.css" />
<link type="text/css" rel="stylesheet" href="/assets/css/MyCustomSkin/window.MyCustomSkin.css" />
<link type="text/css" rel="stylesheet" href="/assets/css/MyCustomSkin/combobox.MyCustomSkin.css" />
<link type="text/css" rel="stylesheet" href="/assets/css/MyCustomSkin/dropdownlist.MyCustomSkin.css" />
<link type="text/css" rel="stylesheet" href="/assets/css/MyCustomSkin/tabstrip.MyCustomSkin.css" />
<link type="text/css" rel="stylesheet" href="/assets/css/MyCustomSkin/editor.MyCustomSkin.css" />
Main Radeditor Class (to give idea of class names)

.RadEditor_MyCustomSkin { /* css styles - all generated automatically */ }
Control :

<telerik:RadEditor runat="server" ID="pageRadEdit" ToolbarMode="Default" EditModes="Design,Html"
DialogsCssFile="~/assets/css/MyCustomSkin/DialogHandler.MyCustomSkin.css"
ToolsFile="~/App_Data/Editor.xml" Width="980px" Height="800px"
EnableResize="false" OnClientLoad="resizeMe" NewLineMode="P"
OnClientSelectionChange="$page.setdirty"
ContentFilters="DefaultFilters,ConvertFontToSpan,IECleanAnchors,OptimizeSpans,MozEmStrong,FixEnclosingP"
EnableEmbeddedSkins="false">
        <SpellCheckSettings DictionaryLanguage="en-GB" AllowAddCustom="false" />
        <Languages>
            <telerik:SpellCheckerLanguage Code="en-GB" Title="English (UK)" />
        </Languages>
</telerik:RadEditor>
DialogHandler.MyCustomSkin.css

@import url('FormDecorator.MyCustomSkin.css');
/*@import url('Grid.MyCustomSkin.css');*/
@import url('Input.MyCustomSkin.css');
@import url('Splitter.MyCustomSkin.css');
@import url('TabStrip.MyCustomSkin.css');
@import url('ToolBar.MyCustomSkin.css');
/*@import url('Upload.MyCustomSkin.css');*/
@import url('Window.MyCustomSkin.css');
@import url('ComboBox.MyCustomSkin.css');
@import url('Button.MyCustomSkin.css');
/*@import url('Editor.MyCustomSkin.css');*/
Note : Editor css is still using wrong class even if the bottom import is uncommented

Web.Config settings

<add key="Telerik.Skin" value="MyCustomSkin" />
<add key="Telerik.ScriptManager.TelerikCdn" value="Disabled" />
<add key="Telerik.StyleSheetManager.TelerikCdn" value="Disabled" />
<add key="Telerik.Web.UI.RenderMode" value="lightweight" />
<add key="Telerik.Web.UI.EnableEmbeddedSkins" value="false" />
<add key="Telerik.EnableEmbeddedSkins" value="false" />

Hi Team,

Does Track Changes work if Multiple Users work Simultaneously on Editor and

Is it possible to view all Users Name and Date Time in different pane, after enabling Track Changes.

Repro steps:    
    open Edge 41 (creator's update brings it)
    start an editor, e.g.: <telerik:RadEditor ID="RadEditor1" runat="server"></telerik:RadEditor>
    type "ab"
    press enter
    type "cd"

Actual: the second paragraph contains only "d"

Expected: the second paragraph contains "cd"

I am currently using the Radeditor "Insert Table" function. I would like this to allow user to auto adjust columns and rows live just like the following demo. https://demos.telerik.com/aspnet-mvc/editor.  I have disable the table wizard and table properties, so user will not be able to mess with this extra stuff. In the Capture.PNG is what I currently have. I would like to have the Want.PNG picture.