Hi Rumen,

 

I have encountered a problem as follows:

When a table is added to the radeditor with empty cells, after inserting text in  the empty cell and rejecting the track changes, the complete td (cell) is removed.

Figure shows text inserted in empty cell with track changes on

After rejecting this track changes:

The cell has been removed and you can see the space in the end

You can use the following table code to reproduce the same, I have tried this in the demo link: https://demos.telerik.com/aspnet-ajax/editor/examples/trackchanges/defaultcs.aspx

<table frame="topbot" class="body_table">
    <thead>
        <tr>
            <th class="td_h">Catalyst</th>
            <th class="td_h">Loading [mg cm^&minus;2]</th>
            <th class="td_h">Tafel slope [mV decade^&minus;1]</th>
            <th class="td_h">ECSA [cm²]</th>
            <th class="td_h"><em>R</em>_ct at &eta; = 100 mV [&Omega;]</th>
            <th class="td_h">&eta; @ _&minus;10 mA cm^&minus;2_geo [mV]</th>
            <th class="td_h">&eta; @ &minus;0.2 mA cm^&minus;2_ECSA [mV]</th>
            <th class="td_h">Current at &eta; = 100 mV [mA cm^&minus;2]</th>
            <th class="td_h">Mass activity at &eta; = 100 mV [A g^&minus;1]</th>
            <th class="td_h">TOF_avg at &eta; = 100 mV (H₂ s^&minus;1)</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="td1">0.1 C anodized</td>
            <td class="td1">0.081</td>
            <td class="td1">52</td>
            <td class="td1"><ins author="RadEditorUser" command="Insert" timestamp="1572804414617" title="Inserted by RadEditorUser on 11/3/2019, 11:36:54 PM" class="reU0">fdff</ins></td>
            <td class="td1">4.6</td>
            <td class="td1">51</td>
            <td class="td1">74</td>
            <td class="td1">&minus;67.00</td>
            <td class="td1">827.55</td>
            <td class="td1">0.93</td>
        </tr>
        <tr>
            <td class="td1">2.0 C anodized</td>
            <td class="td1">0.172</td>
            <td class="td1">78</td>
            <td class="td1">191.9</td>
            <td class="td1">7.6</td>
            <td class="td1">88</td>
            <td class="td1">122</td>
            <td class="td1">&minus;15.10</td>
            <td class="td1">87.88</td>
            <td class="td1">0.13</td>
        </tr>
        <tr>
            <td class="td1">0.1 C O₂ plasma</td>
            <td class="td1">0.045</td>
            <td class="td1">48</td>
            <td class="td1">5.8</td>
            <td class="td1">3.9</td>
            <td class="td1">78</td>
            <td class="td1">34</td>
            <td class="td1">&minus;24.97</td>
            <td class="td1">559.87</td>
            <td class="td1">6.96</td>
        </tr>
        <tr>
            <td class="td1">2.0 C O₂ plasma</td>
            <td class="td1">0.177</td>
            <td class="td1">84</td>
            <td class="td1">103.4</td>
            <td class="td1">5.0</td>
            <td class="td1">123</td>
            <td class="td1">146</td>
            <td class="td1">&minus;4.65</td>
            <td class="td1">26.25</td>
            <td class="td1">0.072</td>
        </tr>
        <tr>
            <td class="td1">0.1 C heat</td>
            <td class="td1">0.037</td>
            <td class="td1">58</td>
            <td class="td1">7.6</td>
            <td class="td1">94.1</td>
            <td class="td1">163</td>
            <td class="td1">110</td>
            <td class="td1">&minus;0.95</td>
            <td class="td1">25.75</td>
            <td class="td1">0.302</td>
        </tr>
        <tr>
            <td class="td1">2.0 C heat</td>
            <td class="td1">0.630</td>
            <td class="td1">80</td>
            <td class="td1">11.5</td>
            <td class="td1">36.6</td>
            <td class="td1">106</td>
            <td class="td1">65</td>
            <td class="td1">&minus;8.24</td>
            <td class="td1">13.07</td>
            <td class="td1">0.662</td>
        </tr>
        <tr>
            <td class="td1">0.1 C acid</td>
            <td class="td1">0.103</td>
            <td class="td1">70</td>
            <td class="td1">11.1</td>
            <td class="td1">165.2</td>
            <td class="td1">162</td>
            <td class="td1">126</td>
            <td class="td1">&minus;2.09</td>
            <td class="td1"></td>
            <td class="td1">0.199</td>
        </tr>
        <tr>
            <td class="td1">2.0 C acid</td>
            <td class="td1">0.683</td>
            <td class="td1">75</td>
            <td class="td1">22.9</td>
            <td class="td1">14.1</td>
            <td class="td1">102</td>
            <td class="td1">101</td>
            <td class="td1">&minus;9.48</td>
            <td class="td1">13.88</td>
            <td class="td1">1.15</td>
        </tr>
    </tbody>
</table>

Do let me know if you need any further information on the same.

Thanks

Regards

Chetan

 

 

The dopdowns of the tools in the Editor's toolbar are shown below the video objects in the Editor's content area in IE 11.

This behavior is occuring only if use firefox browser:

1. If you set the EditModes within backend only to EditMode.Preview then all html table elements within content appears like in EditMode.Design with dashed borders.

You can reproduce it on your own demo site https://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx simple disable EditMode.Html and EditMode.Design.

Now you see the dashed table element borders like in design mode....

2. Sometimes if you switch edit mode from Html to Preview the same affect is occuring with displaying dashed border with html table elements. If you switch directly from Design mode to preview mode all works fine.

3. If you resize the editor in preview mode with resize button on right lower corner the display switch immediatly to dashed borders for all html table elements...

At the moment we use a fix to reset preview mode: If only preview mode is activated for the editor we set the preview mode again with a timeout of 250 ms after loading of dialog is ready (if the timeout is to low no affect appear).
Sys.Application.add_load(function(){ window.setTimeout(function(){$find('AjaxEditorClientID').set_mode(4)},250); }); });

Regards
Thomas

Reproduction steps: 

When the mode is changed to HTML, the content is as follows: 

Expected: 


Actual: 

 

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.

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>

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.

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

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.

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.

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 

By default all options "Copy Format", "Apply Format" and "Clear Format" are all enabled when a ribbonbar toolbar is used, but the second and third options should be disabled initially. 

The problem does not happen in the Default toolbar mode and can be reproduced in the Overview demo of the control -> switch to ribbonbar mode and press the full set of tools radio button. The Clear format tool is located in the sixth button group of the ribbonbar.

Steps to Reproduce:
1. Insert a table and add some data to the table in Chrome
2. Above the Table, insert some text
3. Highlight the text and drag cursor to highlight half of the data in the table
4. Hit Delete on your keyboard

Result: The colgroup is removed from the table

I have a RadEditor that is rendered in mobile mode on a mobile device emulator in Chrome browser.
For this editor, I have subscribed to OnClientCommandExecuted event. The event fires, but the problem is that it fires twice for ToggleScreenMode command.
To reproduce this issue, you can use the page code below and render it in Chrome mobile emulator; then press on edit pencil button followed by clicking the check button.

<%@ Page https://goo.gl/ddHuHyLanguage="C#" AutoEventWireup="true" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Command event firing twice for ToggleScreenMode in Mobile Render Mode</title>
    <meta name="viewport" content="width=device-width,intial-scale=1.0, maximum-scale= 1.0,,user-scalable=no"/>
</head>
<body>
    <form id="form1" runat="server">
         <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js"></asp:ScriptReference>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js"></asp:ScriptReference>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js"></asp:ScriptReference>
            </Scripts>
        </telerik:RadScriptManager>
    <div>
    <telerik:RadEditor ID="RadEditor1" runat="server" AutoResizeHeight="True" RenderMode="Auto" OnClientCommandExecuted="CommandExecuted" Width="99%">
            </telerik:RadEditor>
    </div>
        <script>
            function CommandExecuted(sender, args) {
                if (args.get_commandName() === "ToggleScreenMode" && (typeof sender.isFullScreen() === "undefined" ||
                    sender.isFullScreen() === false)) {
                    alert("Command Executed Fired for ToggleScreenMode");
                }
            }
        </script>
    </form>
</body>
</html>

Workaround:
<telerik:RadEditor ID="RadEditor1" runat="server" AutoResizeHeight="True" RenderMode="Auto" OnClientCommandExecuted="CommandExecuted" Width="99%">
    <Content>dadas</Content>
</telerik:RadEditor>
<script>
    function CommandExecuted(editor, args) {
        if (args.get_commandName() == "ToggleScreenMode") {
            var goingIntoReadMode = $telerik.$(editor.get_element()).find(".reIcon.reIconEditContent").is(":visible");
 
            if (goingIntoReadMode == false) {
                editor.__modifiedContentAlready = false;
                //modify content for edit mode
                console.log("modify content for edit mode")
            }
            if (goingIntoReadMode == true && editor.__modifiedContentAlready == false) {
                //modify content for read mode
                console.log("modify content for read mode");
                editor.__modifiedContentAlready = true;
            }
        }
    }
</script>

OnClientModeChange event is not fired in Mobile RenderMode.

Steps to reproduce:
Run the following code in a mobile Chrome (or mobile emulation) and click the edit Pencil button that switches the edit modes:

        <script type="text/javascript">
            function OnClientModeChange(editor, args) {
                var mode = editor.get_mode();
                switch (mode) {
                    case 1:
                        alert("We are in Design mode");
                        //do something
                        break;
                    case 2:
                        alert("We are in Html mode");
                        //do something
                        break;
                    case 4:
                        alert("We are in Preview mode");
                        //do something
                        break;
                }
            }
        </script>

        <telerik:RadEditor runat="server" OnClientModeChange="OnClientModeChange" ID="RadEditor1" RenderMode="Auto">
        </telerik:RadEditor>

The Delete and Backspace buttons remain enabled in spell check mode, allowing the client to delete selections inside the Editor's content area.

Steps to reproduce:
1. Open http://demos.telerik.com/aspnet-ajax/editor/examples/spellchecker/defaultcs.aspx
2. Click the Spell check icon
3. Select several words from the content and press Backspace/Delete

Result: The selected content is deleted
Expected: The Delete/Backspace button press is ignored