Due to the LightWeight rendering of the Window the Editor appears broken under IE<10. This is due to the rendering difference when the Window is set to Lightweight mode. A possible workaround is using a simple ASPX page with RadEditor inside and set it to the RadWindow's NavigateUrl property.
Setting escaped symbols in the text nodes of the content breaks cursor navigation and word deleting. This is due to IE10 and less browser versions native behavior to interact with escaped symbols as normal ones. A possible resolutions is implementing a filter that strips the undesired characters and disable the IndentHTMLContent: ASP.NET ________________________________________________________________________________ <telerik:RadEditor ID="radEditMain" runat="server" EnableTrackChanges="true" OnClientLoad="OnClientLoad"> </telerik:RadEditor> <script type="text/javascript"> function OnClientLoad(editor, args) { editor.get_filtersManager().add(new MyFilter()); var cleanHtml = editor.get_html(true); editor.set_html(cleanHtml); } MyFilter = function () { MyFilter.initializeBase(this); this.set_isDom(false); this.set_enabled(true); this.set_name("MyFilter"); this.set_description("RadEditor filter description"); } MyFilter.prototype = { getHtmlContent: function (content) { var newContent = content; //Make changes to the content and return it newContent = newContent.replace(/(\r\n|\n|\r)/gm, " "); newContent = newContent.replace(/(\t)/gm, " "); return newContent; } } MyFilter.registerClass('MyFilter', Telerik.Web.UI.Editor.Filter); </script> ________________________________________________________________________________ C# ________________________________________________________________________________ protected void Page_Load(object sender, EventArgs e) { radEditMain.DisableFilter(EditorFilters.IndentHTMLContent); } ________________________________________________________________________________
Due to initial invalid content the Editor's ConvertToXhtml filter throws a JS error that breaks the further initialization of the control. A possible resolution is incorporating the following sample code: <telerik:RadEditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad"> </telerik:RadEditor> <script type="text/javascript"> Telerik.Web.UI.Editor.NestedElementsFix.prototype._getLastInvalidWrapper = function (node) { var parent = node; while (parent.parentNode && this._shouldUnwrapNode(parent.parentNode)) { parent = parent.parentNode; } return parent == node ? null : parent; } function OnClientLoad(editor, args) { editor.set_html(editor.get_html(true)); } </script>
The video object inserted in Design mode still present after switching to HTML view. he issue is reproducible in IE11 and IE10. Steps to reproduce: 1. Navigate to http://demos.telerik.com/aspnet-ajax/editor/examples/clientsideevents/defaultcs.aspx using Internet Explorer 11(11.0.9600.17105 - i assume that if one has ie11 it is this version) 2. Click the Media Manager in the toolbar. 3. Navigate to the folder "PublicRelations" and select the movie "RadNavigation.avi" or upload and select another file. 4. Click insert. 5. Switch to the HTML view in the bottom Result: The movie is still present even though the view has been changed to HTML. I've noticed that this only occurs when the movie is set to autoplay and its play. If I wait till the movie has stopped and try and switch from Design to HTML it seems to work.
When you add a symbol to the end of a line in IE, the cursor moves down to the next line. This behavior does not exist in FF or Chrome, and it did not exist for IE in previous versions of the Editor. Here is a video demonstrating the problem using the Telerik demo editor. http://screencast.com/t/9S0TjfZzyFqj
If the content of the editor contains an inline style which starts with - as -webkit-text-... like in: <h1 style="-webkit-text-stroke-width: 0px;">My Title</h1> A server error is thrown: Server Error in '/' Application. Name cannot begin with the '-' character, hexadecimal value 0x2D.
For example: If this is the HTML in the editor <p><span style="font-size: 11pt; font-family: 'Times New Roman';">Test Test Test<br /></p> selecting only a part of the element and clicking Strip Formatting will not remove formatting Another example: When in a list, individual items cannot be cleared of formatting, e.g.: <ul> <li><strong>bold</strong></li> <li><span style="text-decoration: underline;">underline</span></li> <li><em>italics</em></li> <li><strong><em><span style="text-decoration: underline;">bold underline italics</span></em></strong></li> <li><strong><em><span style="text-decoration: underline;">Underline, Bold, Italics</span></em></strong></li> <li><strong><em><span style="text-decoration: underline;">Italics, Bold Underline</span></em></strong></li> </ul> selecting (a part of) a li element and clicking Strip Formatting will not remove the formatting.
Due to that users cannot easily change the image and preserve the link.
When the Editor is configured to occupy size in percentages and the user switches from default to full screen mode and vice versa, the content area of the control gets broken. The problem is reproducible in all browsers. Video: screencast As a temporary workaround you can attach a handler to the Editor's ClientCommandExecuted event and repaint the Editor in case the current command is ToggleScreenMode: <div style="width: 700px; height: 500px"> <telerik:RadEditor ID="RadEditor1" runat="server" Width="100%" Height="100%" OnClientCommandExecuted="OnClientCommandExecuted"> <Content> <p>dsadasdasdad dasdasdd das dasdasdasd <br /> dsadasdasdad dasdasdd das dasdasdasd <br /> dsadasdasdad dasdasdd das dasdasdasd <br /> dsadasdasdad dasdasdd das dasdasdasd <br /> dsadasdasdad dasdasdd das dasdasdasd <br /> </p> </Content> </telerik:RadEditor> </div> <script> function OnClientCommandExecuted(editor, args) { if (args.get_commandName() == "ToggleScreenMode") { editor.repaint(); } } </script>
There are some areas within the RADEditor that do not support localization: 1. Alerts for Accept All and Reject All track changes. 2. The Comments user interface. 3. Certain strings in the Undo menu. See attached.
This issue causes an annoying flickering of the page and inconvenient typing experience of the user.
'Accept All' and 'Reject All' track changes buttons stay enabled if CanAcceptTrackChanges="false". At the same time Accept and Reject buttons are properly disabled. The behavior is observed both with ToolbarMode set to "Default" and to "Ribbonbar". A temporarily workaround for ToolbarMode='Default' is: <telerik:RadEditor ID="theEditor" EnableTrackChanges="true" runat="server" OnClientLoad="OnClientLoad" OnClientSelectionChange="OnClientSelectionChange" > <Tools> <telerik:EditorToolGroup> <telerik:EditorTool Name="AcceptTrackChange" Text="Accept" /> <telerik:EditorTool Name="RejectTrackChange" Text="Reject" /> <telerik:EditorTool Name="AcceptAllTrackChanges" Text="Accept All" /> <telerik:EditorTool Name="RejectAllTrackChanges" Text="Reject All" /> <telerik:EditorTool Name="EnableTrackChangesOverride" Text="Enable Track Changes Override" /> </telerik:EditorToolGroup> </Tools> <TrackChangesSettings CanAcceptTrackChanges="false"> </TrackChangesSettings> <Content> <strong title="Formatted by RadEditorUser on Tuesday, May 08, 2012 5:59:11 PM" class="reFormat reU0" author="RadEditorUser" timestamp="1336489151795" browsercommand="Bold">RadEditor</strong> </Content> </telerik:RadEditor> <script type="text/javascript"> function OnClientLoad(editor, args) { if (!editor.get_canAcceptTrackChanges()) { editor.get_toolAdapter().getToolByName("RejectAllTrackChanges").set_enabled(false); editor.get_toolAdapter().getToolByName("AcceptAllTrackChanges").set_enabled(false); } } function OnClientSelectionChange(editor, args) { if (!editor.get_canAcceptTrackChanges()) { setTimeout(function () { editor.get_toolAdapter().getToolByName("RejectAllTrackChanges").set_enabled(false); editor.get_toolAdapter().getToolByName("AcceptAllTrackChanges").set_enabled(false); }, 0); } } </script> A workaround for ToolbarMode='Ribbonbar' is setting the following style: .rrbDisabled, .AcceptTrackChange, .RejectTrackChange { opacity: .45; }
This problem causes incorrect behavior and inconvenience among users because when the browser crashes all content is lost.
In RADEditor, the date and time are shown when hovering over someone's Track Changes or Comments. In order to cater to global audiences, this request is for the ability to specify the date and time format that it will use when displaying those tooltips.
The tools are not respected by the toolgroups under IE7 and IE7 standards. This issue causes incorrect layout at resizing and overlay issues of floated tools. The problem is introduced because the toolgroup elements does not have a properly set width. Possible resolution is setting a proper width to every UL at the load event of the editor: <telerik:RadEditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad"></telerik:RadEditor> <script type="text/javascript"> function OnClientLoad(editor, args) { if (editor.isVisible()) { fixToolbarsInIE(editor); } else { editor.add_firstShow(function () { setTimeout(function () { fixToolbarsInIE(editor); }, 0); }) } } function fixToolbarsInIE(editor) { if ($telerik.isIE) { var $ = $telerik.$; var editorID = editor.get_id(); var topTD = document.getElementById(editorID + "Top"); var toolGroupElements = $(topTD).find(".reToolbar"); for (var i = 0, l = toolGroupElements.length; i < l; i++) { calculateTools(toolGroupElements[i]); } } } function calculateTools(toolGroup) { var tools = toolGroup.children; var size = 0; for (var i = 0, l = tools.length; i < l; i++) { var tool = tools[i]; size += tool.offsetWidth; } toolGroup.style.width = size + "px"; } </script>
The initial problem is related with the JS error, because of which the editor's initialization is interrupted. You can workaround this by incorporating this piece of code: <telerik:RadWindow ID="RadWindow1" runat="server" Width="805" Height="450" VisibleOnPageLoad="true"> <ContentTemplate> <telerik:RadEditor runat="server" ID="RadEditor1" Height="200" Width="400" > </telerik:RadEditor> </ContentTemplate> </telerik:RadWindow> <script type="text/javascript"> var oldCommand = Telerik.Web.UI.RadEditor.prototype.toggleEnhancedEdit; Telerik.Web.UI.RadEditor.prototype.toggleEnhancedEdit = function (newValue) { if ($telerik.isSafari && typeof (newValue) != "undefined" && false == this.disableContentAreaStylesheet(newValue)) { window.setTimeout(Function.createDelegate(this, function () { this.disableContentAreaStylesheet(newValue); }), 200); } else { oldCommand.call(this, newValue); } }; </script>
The main issue is the inconsistent behavior of the borders around the content area.
A proper workaround for this problem is applying this CSS rule: div.RadEditor .RadRibbonBar .rrbButton img.rrbButtonImage { top:-7px; }
When the HTML content is set with nested list elements and an empty paragraph right after the primary list, deleting this empty paragraph will cause the nested list to go outside the list item. This matter causes an incorrect HTML markup and additionally causes incorrect tool behavior. Passing trough Design to HTML cures the issue (invoking the content filters) cures the issue, although there are cases where users cannot be prompted to do that. Using native events to resolve the backspace behavior: <telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad"> </telerik:RadEditor> <script type="text/javascript"> function OnClientLoad(editor, args) { editor.attachEventHandler("onkeydown", function (e) { if (e.keyCode == 8 && $telerik.isIE10Mode && !$telerik.isIE10) { var selElm = editor.getSelectedElement(); var isCursorInFront = editor.getSelection().getRange().startOffset == 0; if (selElm && selElm.nodeName == "P" && isCursorInFront) { editor.attachEventHandler("onkeyup", fixContent); } } }); var fixContent = function () { editor.set_html(editor.get_html(true)); editor.detachEventHandler("onkeyup", fixContent); } } </script>