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.
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.
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
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.
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>
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 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.
A workaround is to set the table element's height as well: <telerik:RadEditor runat="server" ID="RadEditor1" Height="400"> </telerik:RadEditor> <telerik:RadButton runat="server" ID="RadBtn1" AutoPostBack="false" Text="Change Size" OnClientClicked="changeEditorSize"></telerik:RadButton> <script type="text/javascript"> function changeEditorSize(sender, args) { var editor = $find("<%= RadEditor1.ClientID %>"); var width = editor.get_element().style.width; editor.setSize(width, "200px"); //this line is the workaround editor.get_mainTable().style.height = "200px"; } </script>
This bug causes incorrect user behavior. Lists cannot be disconnected with Enter, in some cases user cannot add multiple empty paragraphs. To workaround this issue you can incorporate the JavaScript code provided in this example markup: <telerik:RadEditor runat="server" ID="RadEditor1" NewLineMode="P"> </telerik:RadEditor> <script type="text/javascript"> var setCursorFn = Telerik.Web.UI.Editor.Utils._setCursorInNode; Telerik.Web.UI.Editor.Utils._setCursorInNode = function (cursorElement, container, editor) { setCursorFn.call(this, cursorElement, container, editor); if ($telerik.isChrome) { var selection = editor.getSelection(); var range = selection.getRange(); if (!range.collapsed) { range.collapse(); selection.selectRange(range); } } } </script>
The layout of the editor's dialogs break when CSS for Window's lightweight mode are appended. This causes unavailability for the developers to use the lightweight feature of the Window
The area shapes in Image Map Editor dialog couldn't be moved or resized in Internet Explorer 11.
This matter causes incorrect user interaction with the built-in tools. Due to the complexity of the IE11 changes of the selection object, with which the RadEditor control interacts to preserve the correct range the only possible resolution is adding a meta tag in the head element of the page to force the IE10 compatibility mode of the browser: <meta http-equiv="X-UA-Compatible" content="IE=10">
The native ASP.NET controls are capable to preserve their values when using back button of the browser. In the RadEditor control this appears to be broken since 2014 Q1. This issue is encountered due to bug fixing related to a memory leak in IE8. You can resolve this by using the old functionality for content preserving and verify if everything works as expected under IE8. The following markup example shows how to roll back to the old behavior: <telerik:RadEditor runat="server" ID="RadEditor1"> </telerik:RadEditor> <script> Telerik.Web.UI.RadEditor.prototype.set_contentHiddenTextareaValue = function (htmlValue) { var utils = Telerik.Web.UI.Editor.Utils; $telerik.$(this._contentHiddenTextarea).val(utils.encodePostbackContent(htmlValue)); }; </script>
When a BR tag has no precedent text, it is automatically removed. This causes issues when user wants to add some space between lines in the content. For the time being you can use the ContentAreaMode="Iframe" mode as an alternative solution.
The floating toolbar window does not open when the user toggles to full screen. You can resolve the issue by incorporating the following script block: <telerik:RadEditor runat="server" ID="RadEditor1" ToolbarMode="Floating"></telerik:RadEditor> <script type="text/javascript"> Telerik.Web.UI.Editor.DefaultToolAdapter.prototype._showToolbarHolder = function (isVisible) { var editor = this.get_editor(); var toolbarEnum = Telerik.Web.UI.EditorToolbarMode; if (!isVisible) { if (this._toolbarHolder) this._toolbarHolder.hide(); //NEW - Add a check for the toolbar holder return; } //Hide if in fullscreen mode and toolbar is ShowOnFocus if (editor.isFullScreen() && editor.get_toolbarMode() === Telerik.Web.UI.EditorToolbarMode.ShowOnFocus ) return; //Hide previous wrapper and mark yourself as the wrapper var wrapper = Telerik.Web.UI.Editor.DefaultToolAdapter._visibleWrapper; //Return if you are already visible if (wrapper == this && wrapper._toolbarHolder && wrapper._toolbarHolder.isVisible())//NEW - toolbar holder might not be created! { //Activete it before returning, as it could have been deactivated after showing an editor dialog wrapper.get_toolbarHolder().setActive(true); return; } if (wrapper && wrapper._showToolbarHolder) wrapper._showToolbarHolder(false); Telerik.Web.UI.Editor.DefaultToolAdapter._visibleWrapper = this; //Create the holder in the last possible moment before showing this.get_window(); //Do additional initialization depending on toolbar mode this._initNonDefaultToolbarMode(); //Show toolbar hodler this._toolbarHolder.show(); //IE, ShowOnFocus, PageTop: hide properly the fake toolbar parent here instead _moveToolbarsToEditor if ($telerik.isIE) { var toolbarMode = editor.get_toolbarMode(); switch (toolbarMode) { case toolbarEnum.ShowOnFocus: case toolbarEnum.PageTop: editor.get_TopZone().firstChild.style.display = "none"; break; } } }; </script>
When using the built-in AJAX Spell Checker of the Editor, on the first misspelled word the corresponding popup opens. When the user finishes with the first word, the same popup should open for the following word, but under IE11 this does not happen and the user is forced to click on the word for the dialog to open. To resolve this you can force the IE11 browser to IE10 compatibility mode with a meta tag in the head element pf the page <meta http-equiv="X-UA-Compatible" content="IE=10" />
Spell Checking throws JS error on a subsequent opening of the spell checking dialog. You can resolve this by forcing the IE11 browser to IE10 compatibility mode. <meta http-equiv="X-UA-Compatible" content="IE=10" />
When ToolbarMode is set to "RibbonBarFloating" the RadEditor height becomes greater than the control height. As a result the wrapper overlaps with the elements box below. As a temporary workaround for ToolbarMode="RibbonBarFloating" only, the following JavaScript code need to be applied on the page: <script type="text/javascript"> (function () { var getToolbarHeight = Telerik.Web.UI.Editor.UI.DimensionsCalculator.prototype._getToolbarHeight; Telerik.Web.UI.Editor.UI.DimensionsCalculator.prototype._getToolbarHeight = function (container) { var $container = $telerik.$(container); $container.append($container.find("div")); return getToolbarHeight.call(this, container); } })(); </script>
When user selects an image in the RadEditor resize handles appear. When resizing or replacing the image, the same handles still appear at the initial position. This confuse the users that the image is not selected and leave an incorrect trace of the resize handles.