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>
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'
On Google Chrome, the following assingment ends up displaying the body of the html twice within the editor:
radEditor.Content="<HTML><HEAD><STYLE>@import url(./CSS/CI.css);</STYLE></HEAD><BODY><H3>OUTPUT LAYOUT</H3><P>First Name:</P><P>Kerry</P></BODY></HTML>"
The resulting html becomes:
"<html><head><link href="/WebResource.axd?d=IgLlf5SIEZ-4m-Qr1qYVOGbMUL9-osMaMQXxs1c-ODIbmiiieGrgJ2ZuegoRNaCpJJ5zKojqJuk_FD7Cb69kb713UUGq1dCMsrFtihWFgnKkbYnlqQv7Lo2rUoUhmXHopZnTw7Cs3STs4GHdRuMnVHVdYHhRrcdV8Dgdv-U213Y1&t=637050242483188892" type="text/css" id="RADEDITORSTYLESHEET0" rel="stylesheet"></head><body><h3>OUTPUT LAYOUT</h3><p>First Name:</p><p>Kerry</p><h3>OUTPUT LAYOUT</h3><p>First Name:</p><p>Kerry</p></body></html>"
The issue is the "@import url(./CSS/CI.css);" within the Style tag, if the @import url, is removed, then it works as expected.
Works as expected on IE11.
If you add 2 <style> tags, the second one is displayed twice within the editor:radEditor.Content = "<HTML><HEAD></HEAD><BODY><H3>OUTPUT LAYOUT</H3><P>First Name:</P><P>Kerry</P><style>@import url(\"./CSS/CI.css\");</style><style>@import url(\"./CSS/CI2.css\");</style></BODY></HTML>";
1. Extract the attached word file.
2. Open it and copy the table content.
3. Go to https://demos.telerik.com/aspnet-ajax/editor/examples/cleaningwordformatting/defaultcs.aspx and paste it without stripping the Word formatting - everything will be fine.
4. Paste it again with stripping the Word formatting - you will see the problem - there is a ticker border around many of the cells:
If you paste the content without stripping the formatting and after that strip it with the FormatStripper the ticker border will not appear.
Out of stack space error is thrown by the Find & Replace dialog in IE11/Edge when there is an img tag withing the content. The image will cause the Find feature to sit and spin when searching for a string after the img tag. It does not return a result and it does not trigger a modal to display, e.g., “The search string was not found.”
Changing the background color for the second/subsequent paragraph causes background color for first/previous paragraph to be lost/changed. This is a browser-specific bug. Reproduction steps: Navigate Internet Explorer/Edge browser to: Telerik RadEditor Demo Page Select-all and delete. With cursor at the beginning, select a background color from the toolbar. Type some text. Hit the Enter key to start a second paragraph Select the "no-fill" background color from the toolbar. Results: -The background color for the first/previous paragraph is removed.
Reproduction steps:
<
telerik:RadEditor
runat
=
"server"
ID
=
"RadEditor1"
>
<
Content
>
<
span
style
=
"color: #548dd4;"
>asdas</
span
>this is sample text
</
Content
>
</
telerik:RadEditor
>
<
span
style
=
"color: #548dd4;"
>asdas</
span
>this is sample text
<
span
style
=
"color: rgb(84, 141, 212);"
>asdas</
span
>this is sample text
When part of a table from MS Excel is copied and pasted into RadEditor under Edge, the RadEditor inserts an image instead of the html for the table. It inserts <img alt="" src="data:image/png;base64, ... " /> instead of the html. Steps to reproduce: Open http://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx in MS Edge.On the editor select the html and delete everything. On the editor select design Open any Excel file copy a couple of cells Paste in the Editor On the editor select html Instead if html the there is an image tag <img alt="" src="data:image/png;base64,iVBOR ... YII=" /> With firefox, IE 11 and Chrome the html is pasted. For MS Edge the Image tag is pasted. Workaround: <telerik:RadEditor runat="server" ID="RadEditor"></telerik:RadEditor> <script> Telerik.Web.UI.Editor.Utils.containsHtmlAtClipboard = function(oEvent) { var result = oEvent && oEvent.clipboardData && oEvent.clipboardData.getData && oEvent.clipboardData.types && oEvent.clipboardData.types.length && Telerik.Web.UI.Editor.Utils.containsElement(/text\//i, oEvent.clipboardData.types); return result; } </script>
The empty new lines from RTF are imported as empty paragraphs in the editor and not rendered, i.e. <p class="TelerikNormal" style="line-height: 16px;"> </p> <p class="TelerikNormal" style="line-height: 16px;"> </p> <p class="TelerikNormal" style="line-height: 16px;"> </p> <p class="TelerikNormal" style="line-height: 16px;"> </p> <p class="TelerikNormal" style="line-height: 16px;"> </p> They should be rendered, because in other case this breaks the layout of the inserted document.
The context menu for IMG and Table element immediately hides when shown on Mac Firefox. Load this demo http://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx on Firefox Mac OS and right click in a table cell or image. You'll see how the menu pops up and immediately closes. Video reproduction -> http://www.screencast.com/t/osHP96eQOa7
Due to that behavior the Editor control appears to change the actual content of the user, which is considered as a faulty behavior.
When a parent control is disabled by setting Enabled to false, all children controls should inherit the behavior and act as disabled. RadEditor does not follow this logic and stays enabled.
The exact steps to reproduce are: 1. Use RadEditor in http://localdemos.telerik.com/aspnet-ajax-dev/editor/examples/overview/defaultcs.aspx 2. Add this HTML: <p>start</p> <p> </p> <p>end</p> 3. Go to Design; 4. Select from the empty paragraph (<p> </p>) to the end of text (<p>end</p>); 5. Copy via Ctrl+C; 6. Try to paste at the end of the "end" paragraph.
When there are words highlighted as wrong and triggering the Finish Spellchecking without correcting any words, subsequent editing of words inside the sentence causes random cursor replacement. Workaround: <telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad"> <Content>Whether you need a mere Textbox with Google-like spellchecker, or a Word-like content authoring environment, the result is the same: clean <strong>XHTML</strong></Content> </telerik:RadEditor> <script> function OnClientLoad(sender, args) { sender.add_spellCheckLoaded(spellCheckLoaded) } function spellCheckLoaded(sender) { var editor = sender; var spell = editor.get_ajaxSpellCheck(); spell.add_spellCheckEnd(function (sender, args) { editor.set_html(editor.get_html(true)); }); } </script>
ImageManager loses the selection after an image has been edited into the ImageEditor and saved with new file name. video: http://screencast.com/t/rZIp4iioehE
The height is bigger than the viewport. If there are toolbars docked at the left or right, the right toolbar is hidden due to larger width. You can fix a bit the width by using this code: <telerik:RadEditor ID="RadEditor1" runat="server" RenderMode="Lightweight" OnClientCommandExecuted="OnClientCommandExecuted"> <Tools> <telerik:EditorToolGroup> <telerik:EditorTool Name="AjaxSpellCheck" /> </telerik:EditorToolGroup> <telerik:EditorToolGroup dockingzone="Left"> <telerik:EditorTool Name="AjaxSpellCheck" /> </telerik:EditorToolGroup> <telerik:EditorToolGroup dockingzone="Right"> <telerik:EditorTool Name="ToggleScreenMode"></telerik:EditorTool> </telerik:EditorToolGroup> </Tools> </telerik:RadEditor> <script> function OnClientCommandExecuted(editor, args) { if (args.get_commandName() === "ToggleScreenMode" && editor.isFullScreen()) { var editorId = editor.get_id(); var editorElm = editor.get_element(); var leftToolbar = $telerik.$(editorElm).find("#" + editorId + "Left.reToolBarWrapper"); var rightToolbar = $telerik.$(editorElm).find("#" + editorId + "Right.reToolBarWrapper"); var widthExcess = leftToolbar.width() + rightToolbar.width(); if (widthExcess) { editorElm.style.width = (parseInt(editorElm.style.width) - widthExcess) + "px"; } } } </script>
This matter causes incorrect user interaction with the built-in tools. Due to the complexity of the IE11 changes of the selection object, with which the RadEditor control interacts to preserve the correct range the only possible resolution is adding a meta tag in the head element of the page to force the IE10 compatibility mode of the browser: <meta http-equiv="X-UA-Compatible" content="IE=10">
Programmatically added EditorToolGroup to the RadEditor's Ribbonbar is not displayed when the control is localized in Lightweight rendering.