When a table is pasted from Word a border-image:none rule is inserted along with all content. The behavior is encountered only under Firefox and this rule is not needed for the correct rendering of the table.
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>
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 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 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 ToolProviderID property is set, the Undo/Redo property is working only for the first RadEditor contorl
If you create a link with a target="_blank" attribute, the corresponding value shows as selected. When the Link Manager is opened second time the value shows as selected, but the link is not set without a target attribute. You can find attached a sample project, in which is used the Custom Built-In dialogs approach to resolve the problem. For details about this approach follow this link: http://demos.telerik.com/aspnet-ajax/editor/examples/externaldialogspath/defaultcs.aspx
This is causing the whole page to scroll to the editor's position. The same behavior is occurred when a tool from the toolbar of the editor is used. Possible resolution is to change the ContentAreaMode to Iframe.
When RadEditor is configured with ContentAreaMode="Div", its content area is focused and it is empty, the control will not release the focus on pressing "Tab" under Chrome.
The described issue is because of the "Zero width nbsp" character, which is not stripped when the text is submitted. Possible resolution is to strip the character with custom function attached to the OnClientSubmit event of the RadEditor control: <telerik:RadEditor runat="server" ID="RadEditor1" OnClientSubmit="OnClientSubmit" /> <script type="text/javascript"> function OnClientSubmit(editor, args) { var html = editor.get_html(true); html = html.replace(/\u200b/g, ""); editor.set_html(html); } </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.
When multiple paragraphs are set into the content and selected, the font name tool of the StyleBuilder dialog is merging all f them into one span. This causes unexpected behavior and incorrect text manipulation.
This issue is causing inconvenient experience when the new line mode is set to add paragraphs and the cursor is set right after the link element.
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>
Hi, Browser : IE11 Telerik version : 2013.3.1114.40 - Q3 2013 release Steps to reproduce the issue : 1 . Copy ordered list from MS WORD 2010 2. Paste it in RadEditor 3. View html markup in radeditor Each text within LI tag is wrapped by P tag and this issue occurs only in IE11 browser. Ideally ,p tags should be stripped off. Looking forward to your response. Thanks in advance, Anthony
The Node Inspector module is not working when inspecting form elements that are inserted via the 'Insert Form Element' command in IE11.
When the RadEditor is used on Chrome, it is not focused and you click on the empty space in the content area or call the client-side function 'setFocus', the cursor in the content area will not appear, because the editor does not get the focus. You can use the following workaround to avoid the problem when the editor's content is clicked: <telerik:RadEditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad"> </telerik:RadEditor> <script type="text/javascript"> function OnClientLoad(editor, args) { if ($telerik.isChrome) { setTimeout(function () { var body = editor.get_contentArea(); var contentElm = editor.get_contentAreaElement(); body.style.height = (contentElm.offsetHeight - 10) + "px"; }, 0); } } </script>