When the RadEditor is set to ContentAreaMode="Div" mode, opening the Find And Replace dialog and triggering the ReplaceAll functionality is throwing a javaSCript error. A possible workaround is using the provided FindAndReplace.ascx user control in the attached sample project as external dialog. For more information about this approach you can follow this online demo: http://demos.telerik.com/aspnet-ajax/editor/examples/externaldialogspath/defaultcs.aspx
When the RadEditor's dialogs are sit to LightWeight rendering mode and the CDN is enabled a JavaScript error is being thrown in the browser's console
Currently the " entity is converted to a single quote under Chrome or Firefox, when ConvertToXhtml filter is enabled and the entity is placed in the value of an HTML attribute, for example href.
When the ToolProviderID property is set, the Undo/Redo property is working only for the first RadEditor contorl
If a TabStrip with two editors is configured, the editor in the first tab is working correctly, but if the second is shown - its toolbar is not working as expected. Possible resolution is to insert a meta tag in the head element of the main page, which sets the rendering engine of IE10: <meta http-equiv="x-ua-compatible" content="IE=10" /> Another possible resolution is to call the onParentNodeChanged() method after the tab is selected: <telerik:RadTabStrip ID="RadTabStrip1" runat="server" SelectedIndex="0" MultiPageID="RadMultiPage1" OnClientTabSelected="OnClientTabSelected"> <Tabs> <telerik:RadTab runat="server" PageViewID="RadPageView1" Selected="True" Text="Root RadTab1"> </telerik:RadTab> <telerik:RadTab runat="server" PageViewID="RadPageView2" Text="Root RadTab2"> </telerik:RadTab> </Tabs> </telerik:RadTabStrip> <telerik:RadMultiPage ID="RadMultiPage1" runat="server"> <telerik:RadPageView ID="RadPageView1" runat="server" Width="100%" Selected="True"> <telerik:RadEditor ID="RadEditor1" runat="server"> <Content> Content Page 1 </Content> <TrackChangesSettings CanAcceptTrackChanges="False" /> </telerik:RadEditor> </telerik:RadPageView> <telerik:RadPageView ID="RadPageView2" runat="server" Width="100%"> <telerik:RadEditor ID="RadEditor2" runat="server"> <Content> Content Page 2 </Content> <TrackChangesSettings CanAcceptTrackChanges="False" /> </telerik:RadEditor> </telerik:RadPageView> </telerik:RadMultiPage> <script type="text/javascript"> function OnClientTabSelected(sender, args) { var tabIndex = args.get_tab().get_index(); if (tabIndex === 1) { var editor = $find("<%= RadEditor2.ClientID %>"); editor.onParentNodeChanged(); } } </script>
When a Hyperlink element is set with an onclick handler, after passing through the Preview mode it is being stripped under IE7. Also related problem is that the link in the Preview mode are clickable and the URL set to the href attribute is opened in new tab/window. Possible solution for both bugs is to override the function responsible for the conversion of such attributes in the Preview mode with this JavaScript code: Telerik.Web.UI.Editor.Utils.setTargetsForPreview = function (editor) { var contentArea = editor.get_contentArea(); var links = contentArea.getElementsByTagName("A"); for (var i = 0, l = links.length; i < l; i++) { var link = links[i]; //handle targets var target = link.getAttribute("target"); if (target != null) { link.setAttribute("re_target", target); } if (target != "_blank") link.setAttribute("target", "blank"); //handle ckick event var oldOnClick = (link.getAttributeNode('onclick') && link.getAttributeNode('onclick').value) || link.getAttribute("onclick"); if (oldOnClick != null) { link.setAttribute('re_onclick', oldOnClick); } link.setAttribute('onclick', 'return false;'); if (typeof link.onclick === "string") { link.onclick = function () { return false; }; } } }; Telerik.Web.UI.Editor.Utils.restoreTargetsAfterPreview = function (editor) { var contentArea = editor.get_contentArea(); var links = contentArea.getElementsByTagName("A"); for (var i = 0, l = links.length; i < l; i++) { var link = links[i]; //handle targets var oldValue = link.getAttribute("re_target"); if (oldValue != null && oldValue != "null") { link.setAttribute("target", oldValue); } else { link.removeAttribute("target"); } //handle anchors urls var oldOnClick = link.getAttribute("re_onclick"); link.onclick = null; if (oldOnClick != null && oldOnClick != "null") { link.setAttribute('onclick', oldOnClick); } else { link.removeAttribute("onclick"); } link.removeAttribute("re_onclick"); link.removeAttribute("re_target"); } }; Note that this script must be placed in a script tag right after the RadEditor control.
When the modules are removed from the code behind, the editor's content are is set with higher height value, than expected. This causes the editor's layout to break. Possible resolution is to attach a custom Client-side function on the OnClientLoad event of the editor, which invokes the onParentNodeChanged() method. Please follow the following example setup: <telerik:RadEditor ID="PageContent" runat="server" OnClientLoad="OnClientLoad"> </telerik:RadEditor> <script type="text/javascript"> function OnClientLoad(editor, args) { editor.onParentNodeChanged(); } </script>
When a RadEditor's toolbar mode is set to RibbonBar, its left and right border disappear. Possible solutions are to set custom CSS styles that fixes the resizing issue under IE11: Approach 1: .RadRibbonBar.RadRibbonBar_<SkinName> { margin:1px; } Approach 2: .reToolbarWrapper { padding-left:1px; padding-right:1px; }
Newly created areas in the ImageMapEditor dialog cannot be modified and controlled properly by end-users.
The toolbar doesn't show when its mode is ShowOnFocus and PageTop in IE11 A possible resolution is to attach a function to the editor's "focusin" event, the logic of which is to force the visibility state of the toolbar. You can examine the following example: <telerik:RadEditor runat="server" ID="RadEditor1" ToolbarMode="ShowOnFocus" OnClientLoad="OnClientLoad"> </telerik:RadEditor> <script type="text/javascript"> function OnClientLoad(editor, args) { editor.attachEventHandler("focusin", function (e) { var toolAdapter = editor.get_toolAdapter(); setTimeout(function () { var isVisible = toolAdapter._toolbarHolder ? toolAdapter._toolbarHolder.isVisible() : false; if (!isVisible) { toolAdapter._showToolbarHolder(true); } }, 0) }); } </script>
When an image in the list view of the image manager is dropped outside the dialog, a duplicate of this image is stuck to the cursor. After selecting another image, the ghost image remains and overlays the upload window.
There should be two properties under the SpellCheckSettings that let the developer prevent the alerts that are shown when there are no errors and when spellcheck finishes. They could be called SuppressCompleteMessage and SuppressNoErrorsMessage. They would both be boolean and default to false to prevent a breaking change.
The MS Sans Serif font is rendered as Arial in the web environment. The correct one is Sans Serif. Possible solution is to use the following example setup, the logic of which is to replace the MS Sans Serif font to the Sans Serif one: <telerik:RadEditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad"> </telerik:RadEditor> <script type="text/javascript"> function OnClientLoad(editor, args) { var fontNames = editor.get_fontNames(); var fontIndex = fontNames.indexOf("MS Sans Serif"); if (fontIndex >= 0) { fontNames[fontIndex] = "Sans Serif"; } } </script>
The Advanced Mode (embed code) textbox in the Insert External Video dialog is always readonly and you cannot put the code in it. In the meantime you can use the following workaround that will access the textbox and remove the readonly attribute: <telerik:RadEditor ID="RadEditor1" runat="server" OnClientCommandExecuted="OnClientCommandExecuted"> <Tools> <telerik:EditorToolGroup> <telerik:EditorTool Name="InsertExternalVideo" /> </telerik:EditorToolGroup> </Tools> </telerik:RadEditor> <script type="text/javascript"> function OnClientCommandExecuted(sender, args) { if (args.get_commandName() == "InsertExternalVideo") { var extVideoDialog = sender.get_dialogOpener()._dialogContainers["InsertExternalVideo"]; if(extVideoDialog){ extVideoDialog.add_pageLoad(editTextbox); } } } function editTextbox(sender, args) { sender.get_contentFrame().contentWindow.document.getElementById("embedCode").removeAttribute("readonly"); sender.remove_pageLoad(editTextbox); } </script>
If a list is created and every bullet is with different stylization. Stripping all formatting is causing the content to be inserted into one bullet and the styles are not correctly stripped.
When a list is created in the editor. Copy and paste of this list does not behave as expected.
If a list is pasted into the editor's content. Its removal does not remove all the imported HTML content. Some SPAN elements are left intact. This is causing incorrect behavior for further text editing.
If the Height of the RadEditor control is set to percentage value, the content area element is too small and does not correspond to the desired stylization. The table element inside the RadEditor wrapper also is calculated with an incorrect height. A possible resolution is using a custom Client-side function, that sets the correct stylization changes to the table element and the content element. This method should be attached to the editor's OnClientLoad event. Please follow this example setup: <telerik:RadEditor runat="server" ID="RadEditor1" Height="100%" Width="100%" OnClientLoad="OnClientLoad"> </telerik:RadEditor> <script type="text/javascript"> function OnClientLoad(editor, args) { setTimeout(function () { var contentElement = editor.get_contentAreaElement(); var editorsTable = $get(editor.get_id() + "Wrapper"); editorsTable.style.height = "100%"; contentElement.style.height = "100%"; }, 0); } </script>
When RadEditor's ContentAreaMode is Div the entire page is printed instead of just the content. Possible solution is changing the mode to Iframe as it is by default.
Inserting a table is causing the user to switch to HTML mode and insert manually a br element, so that he could start typing in the next line. Possible solution is attaching this Client-side method on the OnClientCommandExecuted event of the RadEditor control: <telerik:RadEditor runat="server" ID="RadEditor1" OnClientCommandExecuted="OnClientCommandExecuted"></telerik:RadEditor> <script type="text/javascript"> function OnClientCommandExecuted(editor, args) { var command = args.get_commandName(); if (command = "InsertTable") { var selection = editor.getSelection(); var range = selection.getRange(); if (range.pasteHTML) { range.pasteHTML("<br />"); } else { editor.pasteHtml("<br/>"); } } } </script> The following workaround entirely changes the behavior by modifying the selection and selects the first TD <telerik:RadEditor runat="server" ID="RadEditor1" OnClientPasteHtml="OnClientPasteHtml"> </telerik:RadEditor> <script type="text/javascript"> var identifierID = "RadEditor_AfterTable"; function OnClientPasteHtml(editor, args) { var commandName = args.get_commandName(); if (commandName === "InsertTable" || commandName === "TableWizard" ) { var currValue = args.get_value(); currValue = currValue.replace(/<\/table>/gi, "</table><div id=" + identifierID + ">​</div>"); //currValue = currValue + "<div id=" + identifierID + ">​</div>"; args.set_value(currValue); setTimeout(function () { selectFirstTD(editor) }, 0); } } function selectFirstTD(editor) { var $ = $telerik.$; var contBody = editor.get_contentArea(); var identifier = $(contBody).find("#" + identifierID); var table = identifier.prev(); var elmToSelect = table.find("th")[0] || table.find("td")[0]; if (elmToSelect.childNodes && !$telerik.isIE) { elmToSelect = elmToSelect.childNodes[0].nodeName === "#text" && elmToSelect.childNodes[0]; } var hasNextElement = identifier.next()[0]; while (hasNextElement && $(hasNextElement).is("style")) { hasNextElement = $(hasNextElement).next()[0]; } editor.selectElement(elmToSelect); if (!hasNextElement) { table.after("<br/>"); } identifier.remove(); } </script>