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.
Image map editor doesn't load the selected image in IE11.
The problem appears to be related to the image and table resizing feature (introduced in Q3 2013), implemented for the Chrome browser. When the content has a large amount of nested tables with images, selecting an image is causing a slow operation and even an unexpected crash of the browser. With this example code you can disable the feature and resolve the performance issue: <telerik:RadEditor ID="RadEditor1" runat="server"> </telerik:RadEditor> <script type="text/javascript"> Telerik.Web.UI.RadEditor.prototype._initializeResizableWidget = function myfunction() { }; </script> Note that this line of code will disable the image/table resizing only for Chrome. Under Firefox and IE this feature is provided by the browser and will still be available.
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>
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.
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 the NewLineMode of a RadEditor is set to Div and a line of text is entered in an empty content area of the control under Chrome, the text will be wrapped in a paragraph element. Possible workaround is to set an initial content with a DIV and BR elements inside: <telerik:RadEditor runat="server" ID="RadEditor1" NewLineMode="Div"> <Content> <div></div> </Content> </telerik:RadEditor> Another possible solution is incorporating the following JS code right after the RadEditor declaration: <telerik:RadEditor runat="server" ID="RadEditor1" NewLineMode="Div"> </telerik:RadEditor> <script type="text/javascript"> Telerik.Web.UI.RadEditor.prototype._onKeyPressed = function (e) { } </script>
If a table with a large content is inserted in the RadEditor: 1) The editor's scroll position jumps when the content is not focused and it is scrolled to the bottom in FireFox. 2)The editor's scroll position jumps when the content is scrolled to the bottom and then a cell from the table is focused in Internet Explorer.
The mentioned delete operations are not working as expected and consistent across the major browsers. This behavior is casing the Track Changes feature to be unavailable and unusable in some cases.
The paragraph is still displayed under the list element in IE8 for Windows XP when the following is performed: 1. The HTML below is placed in a RadEditor in HTML mode; <ul> <li>This is line 1</li> </ul> <p>This is line 2</p> 2. The editor is switched in Design mode; 3. The paragraph is incorrectly joined with the list element by placing the cursor at the start of the paragraph and pressing the Backspace key; The issue can be avoided by bringing back the old behavior of the RadEditor's commands as described in this help article: http://www.telerik.com/help/aspnet-ajax/editor-inline-and-block-commands-behavior-change.html.
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