The problem is only reproducible in Chrome. The error does not affect the content or the functionality of TrackChanges. Chrome throws this exception because it tries to select unavailable DOM range.
The following error is thrown when RadEditor is set in Inline mode with Material skin: TypeError: view.modesRowContainer(...) is undefined Workaround: Sys.Application.add_load(function () { var EditorLightweightView = Telerik.Web.UI.Editor.LightweightView; EditorLightweightView.prototype.modesRowContainerOriginal = EditorLightweightView.prototype.modesRowContainer; EditorLightweightView.prototype.modesRowContainer = function () { return this.modesRowContainerOriginal() || {}; } });
The error that is thrown is "Unable to get property 'get_id' of undefined or null reference". Workaround: var EditorPrototype = Telerik.Web.UI.RadEditor.prototype; EditorPrototype.get_rippleZonesConfigurationOriginal = EditorPrototype.get_rippleZonesConfiguration; EditorPrototype.get_rippleZonesConfiguration = function () { if (!this._rippleZonesConfiguration) { this._rippleZonesConfiguration = this.get_rippleZonesConfigurationOriginal(); } return this._rippleZonesConfiguration; }
Workaround: Set Lightweight for RadMenu in web.config: <add key="Telerik.Web.UI.Menu.RenderMode" value="lightweight" />
When you change the render mode of RadEditor from Lightweight to Classic programmatically (like in the RenderModes demo: http://demos.telerik.com/aspnet-ajax/editor/examples/rendermodes/defaultcs.aspx), wrong items are loaded in the context menu that is displayed by right-clicking on a table cell.
Possible option is to use the ToolsFile property from the code behind in order to configure a ToolsFile.xml file. RadEditor1.ToolsFile = "~/ToolsFile.xml";
The content of RadEditor overflows the height ot the content area in Mobile Safari (tested with IOS 9.3). The issue is reproducible as of version 2015.3.930 Reproduction code: <telerik:RadEditor ID="emailMessageInput" runat="server" Style="font-size: 12px;" Height="450" Width="600"> <Content> foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br /> </Content> </telerik:RadEditor> <br /> <asp:Button ID="btn" runat="server" Text="the editor overflows on an ipad" />
The height is bigger than the viewport. If there are toolbars docked at the left or right, the right toolbar is hidden due to larger width. You can fix a bit the width by using this code: <telerik:RadEditor ID="RadEditor1" runat="server" RenderMode="Lightweight" OnClientCommandExecuted="OnClientCommandExecuted"> <Tools> <telerik:EditorToolGroup> <telerik:EditorTool Name="AjaxSpellCheck" /> </telerik:EditorToolGroup> <telerik:EditorToolGroup dockingzone="Left"> <telerik:EditorTool Name="AjaxSpellCheck" /> </telerik:EditorToolGroup> <telerik:EditorToolGroup dockingzone="Right"> <telerik:EditorTool Name="ToggleScreenMode"></telerik:EditorTool> </telerik:EditorToolGroup> </Tools> </telerik:RadEditor> <script> function OnClientCommandExecuted(editor, args) { if (args.get_commandName() === "ToggleScreenMode" && editor.isFullScreen()) { var editorId = editor.get_id(); var editorElm = editor.get_element(); var leftToolbar = $telerik.$(editorElm).find("#" + editorId + "Left.reToolBarWrapper"); var rightToolbar = $telerik.$(editorElm).find("#" + editorId + "Right.reToolBarWrapper"); var widthExcess = leftToolbar.width() + rightToolbar.width(); if (widthExcess) { editorElm.style.width = (parseInt(editorElm.style.width) - widthExcess) + "px"; } } } </script>
When an input of type text is selected user cannot change its properties from Design mode. Workaround: <telerik:RadEditor runat="server" ID="RadEditor1"> <Content> <input type="text" style="width: 100px; height: 22px;" /> <br /> <textarea></textarea> </Content> </telerik:RadEditor> <script> Telerik.Web.UI.RadEditor.prototype.getSelectedElement = function (range) { var editor = this; var contentArea = editor.get_contentArea(); var $ = $telerik.$; var $Editor = Telerik.Web.UI.Editor; var utils = $Editor.Utils; if (editor.get_renderMode() === Telerik.Web.UI.RenderMode.Mobile) { var highlighted = $(contentArea).find(".__reTextHighlight,.__reNodeHighlight"); if (highlighted.length) { var first = highlighted.get(0); var last = highlighted.last().get(0); return first === last ? first : utils.findCommonAncestor(first, last); } } range = range || editor.getDomRange(); if (!range) { var activeElement; try { activeElement = editor.get_document().activeElement; } catch (ex) { return undefined; } return $(activeElement).is('input[type=text],input[type=password],textarea') ? activeElement : undefined; } var container = range.commonAncestorContainer; if (container === contentArea || $.contains(contentArea, container)) { var selectedNode = $Editor.RangeEdges.commonNode(range); var isTextNode = utils.isTextNode(selectedNode); return utils.isTextNode(selectedNode) ? selectedNode.parentNode : selectedNode; } }; </script>
It should rather select the last cell of the table.
For the time being you can use the following workaround: <telerik:RadEditor ID="RadEditor1" runat="server" ></telerik:RadEditor> <script> var oldExecute = Telerik.Web.UI.Editor.InsertLinkCommand.prototype.onExecute; Telerik.Web.UI.Editor.InsertLinkCommand.prototype.onExecute = function () { this.linkProperties.href = encodeURI(this.linkProperties.href); oldExecute.call(this); } </script>
RadEditor in Fullscreen mode appears cut off at the right and at the bottom. In order to fix that, you can add this CSS rule to the page: <style> .RadEditor.reFullScreen { box-sizing:border-box; } </style> <telerik:RadEditor ID="RadEditor1" runat="server" RenderMode="Lightweight"> </telerik:RadEditor>
You can workaround this issue by resetting the content area's height only for IE: <telerik:RadEditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad"> </telerik:RadEditor> <script> function OnClientLoad(editor, args) { if ($telerik.isIE) editor.get_contentArea().style.height = "auto"; } </script>
When a partially copied table is pasted into the Editor in Chrome, it is pasted wrapped in the folloing div, making it not visible: <div class="telerik_paste_container" style="border-width: 0px; position: absolute; overflow: hidden; margin: 0px; padding: 0px; left: 3px; top: 215px; width: 1px; height: 1px;"> ... </div> Steps to reproduce: 1. Open http://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx 2. Clear the contents of the editor 3. Insert a table (any configuration of rows and columns) 4. Go to a new line 5. Type a word on the new line 6. Select the word and a partial amount of the inserted table 7. Copy 8. Paste 9. Navigate to the HTML browser of the editor 10. Observe the "telerik_paste_container" still wrapping the pasted content Workaround: <telerik:RadEditor ID="RadEditor1" runat="server"> </telerik:RadEditor> <script type="text/javascript"> var editorPrototype = Telerik.Web.UI.RadEditor.prototype; var onAfterPaste = editorPrototype._onAfterPaste; editorPrototype._onAfterPaste = function (range, tmpPasteContainer) { try { onAfterPaste.call(this, range, tmpPasteContainer); } catch (e) { } $telerik.$(this.get_contentArea()).find(".telerik_paste_container").remove(); }; </script>
Currently we are in the process of securing our web sites. we are experiencing issue on Xhtml Validator in RadEditor where it is not properly loading due to mixed content issue. There is no way to redirect to HTTPS instead of HTTP site. We can reproduce this on Rad Editor Demo site by making site as HTTPS and click on XHTML Validator icon. https://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx Could you please add that feature?
This issue can be reproduced when there is some initial HTML content entered that cause scroll to appear. Next, adding some new lines and having a mechanism to call the get_html(true) method would scroll the content area to a random position and cause flickering.