The following commands does not work with the Format Painter tool. 1. underline 2. strikethrough 3. back color 4. fore color 5. bold
Since document.selection is no longer supported in IE11 all occurrences in the code of RadEditor need to be updated accordingly.
The FormatPainter command is not applying Bold, Italic and Underline formatting to the content in Firefox. In Internet Explorer only underline is not applied.
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 button should be added at the top right corner of the formatted code snippet. It should use JavaScript only and not an applet so that content generated from RadEditor can be re-used in other pages. Ideally, it will copy plain text with preserved indentation to the clipboard. Whether the button will be added should be controlled via a checkbox in the Format Code Block dialog. Leave your comment whether you want it checked by default (which can be considered a breaking change).
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.
http://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx 1. Delete the content and type some text 2. Insert a horizontal rule 3. Once you click at the typed text you cannot go to the next line in IE, additional text cannot be inserted in FF, in Chrome when you try to type some text it is inserted at the first line
FIX: The toolbar commands don't fire when the editor is in iframe and has hidden parent in IE11. The content area is disabled too.
We would like the image manager to be able to support: max-width min-width max-height min-height and produce output similar to: <img src="/randomlink.png" style="width : 100%; height : auto; max-width : 960px; min-width : 200px;" /> This way we can use the RadEditor to produce responsive content.
This method is used to fix some layout issues of the editor. For each call of this method, the editors content grows with one BR element. Due to that the content area is getting with additional lines. A possible resolution is incorporating the following override that fixes the onParentNodeChanged method: <telerik:RadEditor runat="server" ID="RadEditor1"> </telerik:RadEditor> <script type="text/javascript"> var oldOnParentNodeChanged = Telerik.Web.UI.RadEditor.prototype.onParentNodeChanged; Telerik.Web.UI.RadEditor.prototype.onParentNodeChanged = function () { oldOnParentNodeChanged.call(this); if (this.get_filtersManager().getFilterByName("MozillaRemoveLastBr")) { this.get_filtersManager().getFilterByName("MozillaRemoveLastBr").getHtmlContent(this.get_contentArea()); } }; </script>
This would be needed in cases when the developers desire to create a logic which accepts all changes on Client-side without alerting any messages to the user. For the time being you can use the following example have more control over the Track Changes feature on the client: <telerik:RadEditor ID="RadEditor1" runat="server" EnableTrackChanges="true"> <Content> <p>Some text</p> </Content> <TrackChangesSettings CanAcceptTrackChanges="true" /> </telerik:RadEditor> <telerik:RadButton runat="server" ID="RadButton1" AutoPostBack="false" OnClientClicked="OnClientClicked" Text="Accept Changes!"/> <script type="text/javascript"> function OnClientClicked(sender) { var editor = $find("<%= RadEditor1.ClientID %>"); var trackChanges = Telerik.Web.UI.Editor.TrackChanges; trackChanges.setEditor(editor); /* use acceptAllChanges() method to prompt the user whether to accept or not accept the changes */ //trackChanges.acceptAllChanges(); /* use acceptAllChangesSilently() method to directly accept changes without notifying the user */ trackChanges.acceptAllChangesSilently(); } </script>
If you set anchors in html content and additional put some HTML comments, under IE7 the hrefs will be placed as absolute. For example the following HTML: <div id="htmlcontent"> <div> <!-- comment beginning --> <a href="/relativePath/ToALink"> <img alt="" src="relativePath/ToMyImage/image.gif" /> </a> </div> <!-- /another ending comment --> </div> Will be transformed to this one: <DIV id=htmlcontent> <DIV><!-- comment beginning --><A href="http://localhost:52771/relativePath/ToALink"><IMG alt="" src="http://localhost:52771/relativePath/ToMyImage/image.gif"> </A></DIV><!-- /another ending comment --></DIV>
For example the Bold, Italic, Underline and Strike-trough commands are not accepted by invoking the AcceptTrackChanges() method. After the post back, the track changes stylization is still the same and the attributes set from the feature (cite, author, timestamp etc.) are not stripped. A possible workaround is using the corresponding method via the Client-side API. To do that you can use this example JavaScript method: function acceptAllChanges() { var editor = $find("<%= RadEditor1.ClientID %>"); var trackChanges = Telerik.Web.UI.Editor.TrackChanges; trackChanges.initialize(editor); trackChanges.acceptAllChangesSilently(); } Note that you should get the correct editor object and pass it as an argument in the initialize() method's overload.
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 problem causes the handles of the widget to be rendered at an incorrect position. The resizable widget should dispose or repaint itself, when the image is being dragged around the content. Possible workaround is to reselect the element on the dragend event of the editor's content. You can follow this example setup: <telerik:RadEditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad"> </telerik:RadEditor> <script type="text/javascript"> function OnClientLoad(editor, args) { editor.attachEventHandler("ondragend", function (e) { var selElm = editor.getSelectedElement(); if (selElm && selElm.tagName && selElm.tagName === "IMG") { editor.selectElement(selElm); } }); } </script>
When you resize the RadEditor beyond the boundaries of the browser's viewport, absolute positioning will be applied to the control, which could result in problems with the layout in certain cases. You can use the following workaround to fix the positioning of the editor until the problem is resolved. Just add the script below at the end of your page: <script type="text/javascript"> var onResizeStart = Telerik.Web.UI.RadEditor.prototype.onResizeStart; Telerik.Web.UI.RadEditor.prototype.onResizeStart = function() { var editorWrapper = this.get_element(); this.resizeStartPosition = { position: editorWrapper.style.position, top: editorWrapper.style.top, left: editorWrapper.style.left }; onResizeStart.call(this); } var onResizeEnd = Telerik.Web.UI.RadEditor.prototype.onResizeEnd; Telerik.Web.UI.RadEditor.prototype.onResizeEnd = function() { var editorWrapper = this.get_element(); if (this.resizeStartPosition && this.resizeStartPosition.position != editorWrapper.style.position) { $telerik.$(editorWrapper).css({ position: this.resizeStartPosition.position, top: this.resizeStartPosition.top, left: this.resizeStartPosition.left }); } onResizeEnd.call(this); } </script>
When you set RadEditor with ContentAreaMode="Div" and start entering a list under IE7 (this includes IE7 mode and Compatibility mode), the list items after the first one will not be displayed in Design view. The following workaround should allow you to avoid the problem until it is resolved: <script type="text/javascript"> function OnClientCommandExecuted(editor, args) { if ($telerik.isIE7) { editor.repaint(); } } </script> <telerik:RadEditor runat="server" ID="RadEditor1" OnClientCommandExecuted="OnClientCommandExecuted"> </telerik:RadEditor>
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.