Steps to reproduce: Run this in IE7 or another IE in IE7 mode: <telerik:RadEditor ID="RadEditor1" runat="server" EditModes="Preview"></telerik:RadEditor> Workaround: <telerik:RadEditor ID="RadEditor1" runat="server" EditModes="Preview"></telerik:RadEditor> <script type="text/javascript"> (function ($T) { if ($telerik.isIE7) { var prototype = $T.Editor.UI.SizerLegacyIE.prototype; var setContentElementHeight = prototype.setContentElementHeight; $T.Editor.UI.SizerLegacyIE.prototype.setContentElementHeight = function () { setContentElementHeight.call(this); var editor = this.editor; if (editor.get_mode() != $T.EditModes.Html) { var iframeParent = this.getIframe().parentNode; if (Math.abs(iframeParent.offsetHeight - editor.get_element().offsetHeight) < 5) { iframeParent.style.height = ""; } } } } })(Telerik.Web.UI); </script>
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>
Example html element inside a bolded html element:
<p>
<strong>
Prior Authorization
<span>inner html element</span>
Interceptor
</strong>
</p>
The resulting html in the html tab has extra html elements in both sections of surrounding still-bolded text.
<p>
<strong>Prior Authorization <span></span></strong>
<span>inner html element</span>
<strong><span></span> Interceptor</strong>
</p>
these pages shows the accessibility standards for tables.
https://www.w3.org/WAI/tutorials/tables/
https://www.w3.org/WAI/tutorials/tables/two-headers/
https://www.w3.org/WAI/tutorials/tables/irregular/
For these two sub links "Tables with two headers" & "Tables with irregular headers", they are looking for "scope=col", "scope=row", "scope=colgroup", "scope=rowgroup".
There doesn't seem to be any built in support for "scope" to be added when using the table wizard, having set on the Accessibility tab a Heading for both a Row & Column.
Add support for "scope" be added to tables created in the Rich Text Editor.
(https://www.telerik.com/forums/table-wizard---scope-attribute-for-tables#XKGf9DNED0a8Cdxvzh7Qvg)
Currently, by using ExternalDialogsPath property, developers can extend the built-in dialogs by adding the user controls in a local folder. It would be a nice-to-have feature, if these user controls can be also located in a virtual folder.
RadEditor allows the copy and paste of images directly into the Editor content area. The Editor converts this images to a base 64 string and includes them in the HTML. What would really be great is if it could instead convert the image to a file, perhaps even from the base 64 string, and save it server side, and instead add an img tag referencing the saved file. This would be very useful for when the editor is being used for sending emails (less space) and even creating content as the file would be able to be cached. It's already being done in the TeamPulse product when a screenshot or other image is pasted into the editor. Please extend this functionality to be built into the AJAX version.
It will be possible to use Lightweight render mode with AccessibleRadEditor.
The Text property of the editor converts the html into plain text. Very handy. It would be really helpful if this could be exposed as a static method on the editor for use elsewhere, without having to create an editor object. I know that I could just grab the source code and create my own, but then I don't get the benefit of improvements and bug fixes you may add in the future.
ColorPicker inside a RadEditor don't fit inside DropDownBody, the last color jumps down a row. This happens when RadEditor Skin is set MetroTouch and RenderMode to Lightweight. Video: http://screencast.com/t/4GOnnf0UcsfU
It becomes the operation of Chrome only. after the new line, if you type continuously double-byte character string "あい",the input result was "い". The correct answer is "あい". For operation that does not occur in earlier versions, I think I've considered this release version of the bug, the cause can be identified?
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>
When a groupbox is inserted and start typing text, the fieldset stays fixed in size. You can use the following resolved command: <telerik:RadEditor runat="server" ID="RadEditor1"> </telerik:RadEditor> <script type="text/javascript"> Telerik.Web.UI.Editor.CommandList.InsertGroupbox = function myfunction(commandName, editor, args) { var localizedTitle = editor.getLocalizedString("RadEditorGroupboxTitle", "Title"); var localizedContent = editor.getLocalizedString("RadEditorGroupboxContent", "Content..."); value = "<fieldset style='width: 200px; min-height: 76px'> <legend>" + localizedTitle + "</legend>" + localizedContent + " </fieldset> "; editor.pasteHtml(value, commandName); } </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); } ________________________________________________________________________________
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>