RadEditor's content is messing up when links are generated through document manager and submit it from Preview mode. The issue is reproducible in Internet Explorer 7 However, a possible workaround for the issue would be to set the following code the OnClientSubmit event of the RadEditor: <telerik:RadEditor OnClientSubmit = "OnClientSubmit" /> <script> function OnClientSubmit(editor) { editor.set_mode(1); //Force design mode } </script>
Inline commands such as bold, italic, underline doesn't trigger each time with empty selection in Internet Explorer.
The paste functionality in RadEditor does not work when EnableTrackChanges property is set to true. This behavior is observed under Chrome and Safari.
When text is pasted in RadEditor with ContentAreaMode="Div" under Firefox and Chrome, the cursor will be positioned before the pasted text.
In the ImageManager when using AsyncUpload as the upload manager control, the uploaded image is not selected. This prevents a fluent workflow of upload and insert of the image. The image preview should react in a contextual way when deleting the image as well. Then the previewer should stay empty as is the case with a first load of the dialog.
The StripFormattingOptions feature does not work when the ContentAreaMode is set to Div mode. This behavior is introduced only in Chrome, Firefox and Internet Explorer 7.
If there are textarea tags or style tags in the HTML content of RadEditor, after completing the spell check the content is repeated several times.
The Bold, Italic, Underline, Subscript and Superscript commands do not work in a combination with EnableTrackChanges="true" and ToolbarMode="RibbonBar".
Content appears double if there is a Style element inside it and the Spell Check is triggered.
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>
The "Link to original" property should insert an image link pointing to the original image and the "Open in a new window" property should add the target attribute to the link with value "_blank". None of these modifications happen if the properties are set to true. Possible workaround is to add the attached ImageManager dialog as an external dialog using the ExternalDialogsPath property of the RadEditor control. If you need step-by-step example for such approach you could follow this live example: http://demos.telerik.com/aspnet-ajax/editor/examples/externaldialogspath/defaultcs.aspx
Since document.selection is no longer supported in IE11 all occurrences in the code of RadEditor need to be updated accordingly.
When creating a tree view with nodes which on click create instances of the RadEditor and pasting inside the content of the second instance throws a JavaScript error. The following workaround will help you avoid this behavior: Set this function to the OnClientLoad property (OnClientLoad = 'OnLoad') function OnLoad(editor, args) { var originalGetPasteIFrame = Telerik.Web.UI.Editor.Utils._getPasteIframe; Telerik.Web.UI.Editor.Utils._getPasteIframe = function (parentDoc, editor) { if ($telerik.isIE8) { $telerik.$(this._pasteIframe).remove(); this._pasteIframe = null; } return originalGetPasteIFrame.call(this, parentDoc, editor); } }
When pasting content between two RadEditors a span with an additional style attribute is generated in Chrome.
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>
AutoResizeHeight functionality is not working correctly under IE, Chrome and Opera, when it is set to true. Behavior: Under IE: Editor is not resized when content is deleted. Under Chrome: Editor's content area is resized to cover the space but the editor preserve its height. under Opera: Editor keeps expanding when removing content.
Setting a content as the following one: <html> <head> </head> <body> <h2>content</h2> </body> </html> After switching the editor mode and creating a post back, a JavaScript error is thrown in the browser console. A possible resolution is overriding the detachEvents methods of the editor with the provided ones. You can use the following setup as example, note that the script tag should be after the RadEditor declaration to override the methods correctly: <telerik:RadEditor runat="server" ID="RadEditor1" ContentFilters="none"> <Content> <html> <head> </head> <body> <h2>content</h2> </body> </html> </Content> </telerik:RadEditor> <asp:Button Text="text" runat="server" OnClick="Unnamed_Click" /> <script type="text/javascript"> Telerik.Web.UI.Editor.NodesTracker.prototype.detachEvents = function () { if (!this.isActive) return; var contentArea = this.editor.get_contentArea(); this.editor.remove_submit(this.cleanUpDelegate); try { $telerik.removeHandler(contentArea, "keyup", this.keyupDelegate); $telerik.removeHandler(contentArea, "keydown", this.keydownDelegate); } catch (ex) { } $telerik.removeExternalHandler(contentArea, "paste", this.pasteDelegate); } Telerik.Web.UI.Editor.EmptyWhitespaceCharTracker.prototype.detachEvents = function () { var contentArea = this.editor.get_contentArea(); this.editor.remove_submit(this.cleanUpDelegate); try { $telerik.removeHandler(contentArea, "keypress", this.cleanUpDelegate); } catch (ex) { } $telerik.removeExternalHandler(contentArea, "mousedown", this.cleanUpDelegate); $telerik.removeExternalHandler(contentArea, "touchstart", this.cleanUpDelegate); } </script>
The problem is due to changes related to the selection object of the IE11 browser. Because of that the getSelectedElement() method retrieves wrong values. This issue causes incorrect behavior of the following features/methods: - The DOM inspector module shows incorrect value; - The Image Properties dialog opens with blank attributes; - The Image Map Editor dialog alerts that image is not selected; - The getSelectedElement() method retrieves incorrect value; - When a table is selected, an incorrect alert message is being thrown on opening the Table Properties dialog from the context menu. Possible resolution is to use the following example setup with the function that overrides the original Selection prototype: <telerik:RadEditor runat="server" ID="RadEditor1"> </telerik:RadEditor> <script type="text/javascript"> Telerik.Web.UI.Editor.Selection.prototype.getParentElement = function () { var rng = this.getRange(); if (!rng) return null; //IE if (rng.commonAncestorContainer)//MOZ, Safari, Opera { var theSelection = this._window.getSelection(); //Safari! var startContainer = rng.startContainer ? rng.startContainer : theSelection.baseNode; var endContainer = rng.endContainer ? rng.endContainer : theSelection.extentNode; var startOffset = rng.startOffset != null ? rng.startOffset : theSelection.baseOffset; var endOffset = rng.endOffset != null ? rng.endOffset : theSelection.extentOffset; var anchorOffsetChild = theSelection.anchorNode.childNodes[theSelection.anchorOffset]; if (anchorOffsetChild && (anchorOffsetChild.nodeName == "IMG" || (startContainer == endContainer && (endOffset - startOffset) == 1))) { return anchorOffsetChild; } else { if ($telerik.isSafari) // new fix context menu in Safari and Chrome { var tagName = (theSelection.anchorNode && theSelection.anchorNode.parentNode) ? theSelection.anchorNode.parentNode.tagName : ""; if (tagName == "TH" || tagName == "TD") { return theSelection.anchorNode.parentNode; } else if (tagName == "TR") { return theSelection.anchorNode; } } if (!rng.commonAncestorContainer.tagName) { if (this._window.document == rng.commonAncestorContainer && theSelection.baseNode)//SAFARI { return theSelection.baseNode.parentNode; } return rng.commonAncestorContainer.parentNode; } else { // Workaround for issue related to the retrieved // Image element under IE11 if (rng.commonAncestorContainer.firstElementChild && (rng.commonAncestorContainer.firstElementChild.tagName === "IMG" || rng.commonAncestorContainer.firstElementChild.tagName === "TABLE")) { return rng.commonAncestorContainer.firstElementChild } return rng.commonAncestorContainer; } } } else if (rng.length) { return rng.item(0); } else if (rng.parentElement) { return rng.parentElement(); } else { return null; } }; </script> Note that the script tag should be placed right after the RadEditor declaration.