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. 

When EnableComments is set to true, the content from the clipboard is pasted twice in an empty editor.

RadEditor Configuration:

<telerik:RadEditor runat="server"
    EnableComments="true">
    <Tools>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="Bold" />
            <telerik:EditorTool Name="Italic" />
            <telerik:EditorTool Name="Underline" />
            <telerik:EditorSeparator />
            <telerik:EditorTool Name="Undo" />
            <telerik:EditorTool Name="Redo" />
            <telerik:EditorTool Name="Cut" />
            <telerik:EditorTool Name="Copy" />
            <telerik:EditorTool Name="Paste" />
            <telerik:EditorTool Name="PastePlainText" Text="Paste Plain Text" />
            <telerik:EditorTool Name="FindAndReplace" Text="Find and Replace" />
            <telerik:EditorSeparator />
            <telerik:EditorTool Name="Indent" />
            <telerik:EditorTool Name="Outdent" />
            <telerik:EditorTool Name="InsertOrderedList" Text="Numbered List" />
            <telerik:EditorTool Name="InsertUnorderedList" Text="Bulleted List" />
            <telerik:EditorTool Name="LinkManager" />
            <telerik:EditorTool Name="Unlink" />
            <telerik:EditorSeparator />
            <telerik:EditorTool Name="AjaxSpellCheck" Text="Spell Check" />
            <telerik:EditorTool Name="InsertSymbol" Text="Insert Symbol" />
        </telerik:EditorToolGroup>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="AcceptTrackChange" Text="Accept Change" />
            <telerik:EditorTool Name="RejectTrackChange" Text="Reject Change" />
            <telerik:EditorTool Name="AcceptAllTrackChanges" Text="Accept All Changes" />
            <telerik:EditorTool Name="RejectAllTrackChanges" Text="Reject All Changes" />
            <telerik:EditorTool Name="EnableTrackChangesOverride" Text="Track Changes" />
            <telerik:EditorTool Name="AddComment" Text="Add Comment" />
            <telerik:EditorTool Name="RemoveComment" Text="Remove Comment" />
            <telerik:EditorTool Name="RemoveAllComments" Text="Remove All Comments" />
            <telerik:EditorTool Name="ImageManager" Text="Insert Image" />
        </telerik:EditorToolGroup>
    </Tools>
</telerik:RadEditor>

Potential workaround:
<script type="text/javascript">
    function OnClientPasteHtml(sender, args) {
        var commandName = args.get_commandName();
        var value = args.get_value();
 
        if (commandName == "Paste" && Telerik.Web.Browser.ie) {
            args.set_value(value);
            args.set_cancel(true);
        }
    }
</script>
<telerik:RadEditor runat="server" Height="300px" StripFormattingOptions="Span,Font,Css" EnableTrackChanges="true" OnClientPasteHtml="OnClientPasteHtml"
    ContentFilters="FixEnclosingP,RemoveScripts,FixUlBoldItalic,IECleanAnchors,MozEmStrong,ConvertFontToSpan,ConvertToXhtml,IndentHTMLContent,EncodeScripts,OptimizeSpans,ConvertTags,StripCssExpressions,RemoveExtraBreaks"
    EnableComments="true" NewLineMode="P" EditModes="Design,Html">
</telerik:RadEditor>

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.

Hi Team,
Is there any way to set the MaxTemplateSize,MaxFlashSize,MaxMediaSize,MaxDocumentSize,MaxTemplateSizes from the web.config itself without any code change. currently my system taking the default value "200KB". please let me know is there any way, in asp.net Ajax RadEditor in Asp.net C#. We are using telerik dll version 2017.1.228.45.

When using the Microsoft Edge browser with the Editor, you cannot add field values for some form elements. This seems to affect Radio buttons and checkboxes. It is possible that it affects other form elements as well. I also see this same problem when using your demo page https://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx.

Edge does not offer the hasLayout capability of Internet Explorer, which selects the form element on click. In Edge you can select a form element as you could do it with a text: https://www.screencast.com/t/mo25Rm1kTSdB. The click selection is not currently supported.

Steps to reproduce:
1. Go to the Editor demo page in Chrome
2. CTRL+A on the editor and hit delete
3. Hit Delete or Backspace again
Result: Uncaught TypeError Appears in the console

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

Position the cursor between the words SharePoint and Whether in the first paragraph and add a line break, after that press Backspace and you'll see that the new line does not disappear.

Adding new sections between existing paragraphs or after the last paragraph seems to work fine, but if you have to break up an existing paragraph into two paragraphs and then want to turn it back into one you won't be able to.

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

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>