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.
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>
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.
Image map editor doesn't load the selected image in IE11.
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>
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>
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>
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>
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>
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.
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
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).
The FormatPainter command is not applying Bold, Italic and Underline formatting to the content in Firefox. In Internet Explorer only underline is not applied.
Since document.selection is no longer supported in IE11 all occurrences in the code of RadEditor need to be updated accordingly.
When the commands "Insert Date", "Insert Time" and "Insert Symbol" are used, the content that is inserted via these commands is not cleared upon clicking Undo.
When an Image or a Table elements are being inserted into the content of the editor, the undo command should revert the insertion.
When there is some bold text in the content and teh backspace is used to delete it, the browser crashes. The problem stems from the new implementation of the inline commands. To resolve this you can roll back to the default browser behavior as described in the following help article: http://www.telerik.com/help/aspnet-ajax/editor-inline-and-block-commands-behavior-change.html
According to the WAI-ARIA specification, the Shift+Tab in Rich Text Box should focus the toolbar if the cursor is in the content area.As a side effect the Tab functionality get executed instead of Shift+Tab. The behavior is correct in FF and IE, but not in Chrome Possible workaround is overriding the InsertShiftTab command with this function: <telerik:RadEditor runat="server" ID="RadEditor1"> </telerik:RadEditor> <script type="text/javascript"> Telerik.Web.UI.Editor.CommandList.InsertShiftTab = function (commandName, editor, oTool) { var oParent = editor.getSelectedElement(); if (typeof (oParent.tagName) == "undefined") oParent = oParent.parentNode; var tdNode = Telerik.Web.UI.Editor.Utils.getElementParentByTag(oParent, "TD"); if (tdNode) { Telerik.Web.UI.Editor.Utils.MoveToPreviousCell(tdNode, editor); } else { setTimeout(function () { var toolsArray = editor.get_toolAdapter().get_tools(); var lastTool = toolsArray[toolsArray.length - 1].get_element(); if (document.activeElement !== lastTool) { lastTool.focus(); } }, 0); } return false; }; </script>
The RadEditor's Media Manager dialog uses pasteHtml functionality to insert Object elements in the contentArea. The pasteHtml functionality do not position the cursor correctly for this case (pasted content ends with a object). The issue can be workarounded by appending a character after the object. Then using a content filter the additional characters will be removed. <telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad" OnClientPasteHtml="OnClientPasteHtml"> </telerik:RadEditor> <script type="text/javascript"> function OnClientPasteHtml(editor, args) { if ($telerik.isChrome && args.get_commandName() == "MediaManager") { args.set_value(args.get_value() + String.fromCharCode(8203)); } } function OnClientLoad(editor, args) { if ($telerik.isChrome) { editor.get_filtersManager().add(new MyFilter()); } } MyFilter = function() { MyFilter.initializeBase(this); this.set_isDom(false); this.set_enabled(true); this.set_name("RadEditor filter"); this.set_description("RadEditor filter description"); } MyFilter.prototype = { getHtmlContent: function(content) { return content.replace(/(object>)[\u200b]/gm, "$1"); // or content.replace(/[\u200b]/gm, "") }, getDesignContent: function(content) { return content; } } MyFilter.registerClass('MyFilter', Telerik.Web.UI.Editor.Filter); </script>
The scenario is related to RadEditor working with content providers. When inserting an image in chrome through Image Manager, the default width and height are applied to the HTML. The behavior is observed only in Chrome browser.