Having the entity in a sentence, and trying to find or find and replace in this sentence, the found word seem to be incorrectly highlighted/selected. Therefore, when trying to replace, incorrect selection is replaced. A possible fix is adding the entities inside span elements, so that additional inner text nodes are created. The following code example implements such functionality upon opening and closing the FindAndReplace dialog <telerik:RadEditor ID="RadEditor1" runat="server" OnClientCommandExecuted="OnClientCommandExecuted"> <Content> <p>some text. some text.</p> </Content> </telerik:RadEditor> <script type="text/javascript"> function OnClientCommandExecuted(editor, args) { var commandName = args.get_commandName(); if ($telerik.isIE && commandName === "FindAndReplace") { updateNbspEntities(editor, true); var dialog = editor.get_dialogOpener()._dialogContainers[commandName]; dialog.add_close(function () { updateNbspEntities(editor, false); }); } }; function updateNbspEntities(editor, toAddInNodes) { var html = editor.get_html(true); if (toAddInNodes) { // insert all entities inside nodes to fix IE ranges html = html.replace(/(( )+)/gi, "<span>$1</span>"); } else { // restore them when FindAndReplace dialog is closed html = html.replace(/<span>(( )+)<\/span>|<font>(( )+)<\/font>/gi, "$1"); } editor.set_html(html); }; </script>
Steps to reproduce: 1. Create StyleSheet.css file containing the following style: p { color: red; } 2. Set the following markup: <telerik:RadWindow ID="RadWindow1" runat="server" VisibleOnPageLoad="true"> <ContentTemplate> <telerik:RadEditor ID="RadEditor1" runat="server"> <CssFiles> <telerik:EditorCssFile Value="StyleSheet.css" /> </CssFiles> <Content> <p>test</p> <p>test</p> </Content> </telerik:RadEditor> </ContentTemplate> </telerik:RadWindow> 3. Make sure RadEditor's EditorCssFile property points to the created StyleSheet.css file Result: The red color is not applied to the paragraphs in the content area. Workaround: <script> (function (utils) { var addStyleSheet = utils.addStyleSheet; utils.addStyleSheet = function (url, doc, id) { if ($telerik.isFirefox) { if (!url) return; doc = doc || document; var link = doc.createElement("link"); link.setAttribute("href", url, 0); link.setAttribute("type", "text/css"); link.setAttribute("rel", "stylesheet", 0); if (id) link.setAttribute("id", id); var headElement = doc.getElementsByTagName("head")[0]; var addSheet = function () { headElement.appendChild(link); }; window.setTimeout(addSheet, 200); } else { addStyleSheet.call(this, url, doc, id); } } })(Telerik.Web.UI.Editor.Utils); </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.
When importing external video in RadEditor, the video in the embedding code does not have the option to use https. The dialog could detect the protocol from the video to be imported and use it in the generated code at the end.
When you use the ApplyClass command to set CSS classes to selections in a paragraph element in the content of RadEditor, the CSS class is applied to the whole paragraph.
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>
The issue is reproducible when NewLineMode is Br and the cursor is at the end of the formatting node in Chrome. The workaround is to check the position of the new inserted Br element and append it to the formatting node if it is necessary. <telerik:RadEditor ID="RadEditor1" runat="server" NewLineMode="Br"> </telerik:RadEditor> <script type="text/javascript"> (function () { if (!$telerik.isChrome) return; var insertBr = Telerik.Web.UI.Editor.EnterNewLineCommand.prototype._insertBrElementSafari; Telerik.Web.UI.Editor.EnterNewLineCommand.prototype._insertBrElementSafari = function () { var utils = Telerik.Web.UI.Editor.Utils, command = this, selection = command.get_editor().getSelection(), range = selection.getRange(); if (range.commonAncestorContainer != range.startContainer || range.commonAncestorContainer != range.endContainer) return insertBr.call(command); var commonElement = utils.isTextNode(range.commonAncestorContainer) ? range.commonAncestorContainer.parentNode : range.commonAncestorContainer; var commandResult = insertBr.call(command); range = selection.getRange(); var br = range.commonAncestorContainer.childNodes[range.startOffset]; if (!utils.isTag(br, "br")) return commandResult; if (!$telerik.$.contains(commonElement, br)) { commonElement.appendChild(br); range.selectNodeContents(commonElement); range.collapse(false); selection.selectRange(range); } return commandResult; } })(); </script>
Steps: 1. Add some track changes text using Author=User0 and UserCSSId="reU0". 2. Change the Author to "User1" and UserCSSId to "reU1". 3. Click inside of User0's tracked text and start typing. Results: The new text is displayed as if User0 wrote it, in User0's color. Expected Result: The new text that was injected by User1 in the middle of User0's text would be have User1's color and hover text that pertains to User1. (Similar to how Word does it.)
When there are list items which are links, pressing enter to create new list item duplicates the previously created anchor. The same issue applies when new lines are created with link inside.
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 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" />
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>
Clipboard operations are restricted in these browsers and when the paste tool is used nothing is happening. An alert should show up just like the Copy and Cut tools are designed. A possible workaround is using the same functionality as the Cut command by incorporating the following JavaScript line of code <telerik:RadEditor ID="RadEditor1" runat="server"> </telerik:RadEditor> <script type="text/javascript"> Telerik.Web.UI.Editor.CommandList["Paste"] = Telerik.Web.UI.Editor.CommandList["Cut"]; </script>
When typing text, user tries to change the font-size or font-name a span element is added into the content with the chosen formatting options, but new text is not added into the span but outside. Due to that the applied formatting does not affect the new text typed in the RadEditor.
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 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>
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 area shapes in Image Map Editor dialog couldn't be moved or resized in Internet Explorer 11.
Add a property for setting the default mode of RadEditor (Design, HTML, Previw). Currently this could be obtained using the approach in the following help article: http://www.telerik.com/help/aspnet-ajax/editor-set-mode.html
Linking an image inserted through the ImageManager via the LinkManager does not place the creating link on the right place - the <a> tag is inserted eithr inside the <img> one or beside it. The issue could be reproduced in IE11. You can see the issue reproduced in the attached video. Steps to reproduce: 1. Open http://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx in IE11 2. Type some text in the Editor 3. Open the IamgeManager and insert an image 4. Select the inserted image and open the Link Manager Expected result: the image tag is wrapped inside an <a> tag Actual result: The <a> tag is inserted inside the <img> one