I've noticed a problem that the editor is now stripping off any background-image style from any tag. The problem seems to be that it is converting single quotes (') to double quotes (") which then close the opening quote for the style property, therefore making the HTML invalid. Here's how it can be reproduced: In the rad editor go the HTML tab. Add the following code: <div style="background-image: url('something.jpg');">This is a test</div> Click the Design tab, then back to the HTML tab. Notice that the attribute has been changed so that it now reads: <div style="background-image: url("something.jpg");">This is a test</div> This is obviously invalid HTML. Click on the Design tab then back to the HTML tab. The style has now been removed completely. This can be reproduced in the current Telerik demo site.
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.
Having more than one editor on the page, with EditType="Inline", and using dropdown tools causes the event to be raised for the incorrect editor.
It is a common scenario users to start selecting text and accidental trigger mouseup event outside of the content area. Still, the focus is inside RadEditor and InlineEditCompleted event should not fire. Possible workaround: <telerik:RadEditor runat="server" ID="RadEditor1" EditType="Inline" OnClientLoad="OnClientLoad" OnClientInlineEditCompleted="OnClientInlineEditCompleted"> <Content> some text </Content> </telerik:RadEditor> <script> function OnClientInlineEditCompleted(sender, args) { if (sender._editCompleted) { alert("Fired!"); } } function OnClientLoad(sender, args) { $telerik.$(document).on("mouseup", function (e) { if (e.target === sender.get_contentArea() || e.target === sender.get_textArea()) { sender._editCompleted = true; } }) $telerik.$(document).on("mousedown", function (e) { if (e.target === sender.get_contentArea() || e.target === sender.get_textArea()) { sender._editCompleted = false; } else { sender._editCompleted = true; } }) } </script>
The exact steps to reproduce are: 1. Use RadEditor in http://localdemos.telerik.com/aspnet-ajax-dev/editor/examples/overview/defaultcs.aspx 2. Add this HTML: <p>start</p> <p> </p> <p>end</p> 3. Go to Design; 4. Select from the empty paragraph (<p> </p>) to the end of text (<p>end</p>); 5. Copy via Ctrl+C; 6. Try to paste at the end of the "end" paragraph.
Inserting a new line after a link typically adds a new line and removes the copied link. However, this does not work when paragraph is about to be split. For the time being you can override the _nodeInsertedHandler method to resolve the bug as in this example: <telerik:RadEditor runat="server" ID="RadEditor1"> <Content> <p><a href="http://www.telerik.com" >link</a>text</p> </Content> </telerik:RadEditor> <script> Telerik.Web.UI.Editor.InsertParagraphCommand.prototype._nodeInsertedHandler = function (args) { var command = this, cursor = args.get_cursor(), container = args.get_container(), isEmptyContainer = command._isEmptyContainer(container, cursor), $E = Telerik.Web.UI.Editor, utils = $E.Utils; var parentAnchor = utils.getElementParentByTag(cursor, "A"); if (command._isEmptyContainer(parentAnchor, cursor)) command._removeNode(parentAnchor); if (isEmptyContainer) { if (command.get_editor().get_enableTrackChanges()) { var tcUtils = $E.TrackChangesUtils, parentTrackedInsert = tcUtils.getParentTrackChangesInsertNode(cursor, container), parentTrackedDelete = tcUtils.getParentTrackChangesDeleteNode(cursor, container); command._removeNode(parentTrackedInsert); command._removeNode(parentTrackedDelete); } } }; </script>
You can workaround this issue by using this override: <telerik:RadEditor runat="server" ID="RadEditor1"> <Content> <br/> <iframe src="about:blank">Iframe not supported</iframe> </Content> </telerik:RadEditor> <script> Telerik.Web.UI.Editor.Utils._copyElementsBetweenNodes = function (oldNode, newNode, elementName) { var oldElements = oldNode.getElementsByTagName(elementName); var newElements = newNode.getElementsByTagName(elementName); for (var i = 0; i < oldElements.length; i++) { switch (elementName) { case "script": case "title": newElements[i].text = oldElements[i].text; break; case "style": if (newElements[i].innerHTML != oldElements[i].innerHTML) { newElements[i].styleSheet.cssText = oldElements[i].styleSheet.cssText; } break; case "select": newElements[i].selectedIndex = oldElements[i].selectedIndex; break; case "input": if ((oldElements[i].type == 'radio' || oldElements[i].type == 'checkbox') && $telerik.$(oldElements[i]).attr("checked")) { $telerik.$(newElements[i]).attr("checked", "checked"); if ($telerik.isIE9Mode && oldElements[i].type == 'checkbox' && oldElements[i].checked) { newElements[i].checked = true; newElements[i].setAttribute("checked", "checked"); } } break; case "iframe": var innerHTML = oldElements[i].innerHTML; if (innerHTML) { var outerHTML = newElements[i].outerHTML; if (outerHTML) { var gtIndex = outerHTML.indexOf(">"); if (gtIndex > 0) { outerHTML = outerHTML.substr(0, gtIndex) + ">" + innerHTML + outerHTML.substr(gtIndex + 1 + innerHTML.length); newElements[i].outerHTML = outerHTML; } } } break; default: if (newElements[i].innerHTML != oldElements[i].innerHTML) $E.Utils.setElementInnerHtml(newElements[i], oldElements[i].innerHTML); break; } } }; </script>
For example, using this markup: <telerik:RadEditor ID="RadEditor1" runat="server" ToolbarMode="RibbonBar"> </telerik:RadEditor> and this Page_Init code: protected void Page_Init(object sender, EventArgs e) { RadEditor1.RenderMode = RenderMode.Lightweight; } Causes icons to either miss or their position is incorrect.
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 Paste event is added twice to the Editor's undo stack in IE. The issue is reproducible as of Q3 2013. Steps to reproduce: 1. Open http://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx 2. Paste some content Result: The Paste command is added two time in the Undo stack
The content is not scrolled to the end of the pasted content in IE11 - the scrollbar keeps its initial position instead. The issue is reproducible in IE (tested in IE11) and Chrome, but not in Firefox nor standard editable iframe. Steps to reproduce: 1. Open in IE: http://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx 2. Paste big enough content, so the scrollbar will be shown Actual: The scrollbar stays on the top. Expected: The content area is scrolled to the end of the pasted content Possible workaround could be creating a temporary selectable element after the pasted content, which to be selected manually: <telerik:RadEditor ID="txtMessage" runat="server" OnClientPasteHtml="OnClientPasteHtml"> </telerik:RadEditor> <script> function OnClientPasteHtml(editor, args) { if (args.get_commandName() == "Paste" && $telerik.isIE) { args.set_value(args.get_value() + "<div id='selectableEl'></div>"); setTimeout(function () { var selectedEl = editor.get_document().getElementById("selectableEl"); console.log(editor.getSelectedElement()); Telerik.Web.UI.Editor.Utils.scrollTo(selectedEl, editor); $telerik.$(selectedEl).remove(); }, 0); } } </script>
The default action for the Bold and Italic buttons ([B] and [I]) on the toolbar, is to insert the <strong> and <em> tags. However, this is not the same, and may insert the wrong semantic information. Bold and Italic are used in far more contexts than just emphasis. For example, many people use these functions to create headlines. (While not semantic, this is not incorrect because they choose to apply a styling.) Italic is also commonly used in quotes and references. None of these applications are correct with <strong> and <em> tags. Also, remember that <strong> and <em> only render as bold and italic in the default settings for the most common browsers. There are many browsers that don't/can't render these as bold and italic, and a website's stylesheet can also easily override the rendering of <strong> and <em>. This is not what the writer expects, as they have simply used the Bold and Italic buttons in the editor. Instead, the Bold and Italic buttons should insert style code, such as <span style="font-weight: bold"> and <span style="text-decoration: italic">. The Underline button is already doing this. If the preference is to use tags instead of inline style, then the <b> and <i> tags should be used instead. Please note that, even though these were deprecated in HTML4, they are now again valid for HTML5. If the goal is to produce semantic HTML, then the Bold and Italic buttons should be replaced with Emphasis and Strong buttons. I *know* the editor can be configured to do this. It is the default setting (which is used by 99% of your users) that is wrong. A similar situation was previous the case for the Indent button, which inserted the <blockquote> tag. Thankfully, this has been changed to insert the style="margin-left: 40px;" code instead. References: - https://www.nosegraze.com/difference-between-b-strong-html/ - https://web.archive.org/web/20091124170143/http://lists.evolt.org/archive/Week-of-Mon-20010521/032901.html - http://engineeredweb.com/blog/2013/html5-semantic-diff-bold-strong/ - http://stackoverflow.com/questions/4939807/strong-vs-font-weightbold-em-vs-font-styleitalic - https://developer.mozilla.org/en/docs/Web/HTML/Element/strong#Bold_vs._Strong - http://stackoverflow.com/questions/271743/whats-the-difference-between-b-and-strong-i-and-em - http://www.html5-tutorials.org/html-basics/i-b-em-strong-tags/ (This is not a new situation, many of the references are over 5 years old.)
In scenarios where RadEditor is moved through the DOM the typical approach is to call the onParentNodeChanged method in order to re-render the editor. In Edge browser this does not work. CleanAtributes filter is alerted as failed and further RadEditor is unresponsive. Temporary solution is to switch the content area mode to DIV: <telerik:RadEditor ID="RadEditor1" runat="server" ContentAreaMode="Div" />
Using plain RadEditor controls with default Default toolbar where ToolProvideID is also used, a JS error is thrown and ToolProvide mechanism does not operate as expected. As a temporary workaround, you can use any other toolbar mode (e.g., ShowOnFocus).
When having a video object added via the Media Manager, switching from Design to HTML couple of times results to multiple param tags duplicated.
When we use the context menu on a table to insert a new row (above or below) if the table uses css class layout, the new line is the same one in which we click with the right mouse button to open the context menu. So my suggest is re-apply the css class layout automatically after inserting a new row or column. I believe in using OnClientCommandExecuted event, and his call for the same function as applied css class layout for the first time. In the Annex there is a sequence of screen shots illustrating the situation
Tracked content that is deleted should be removed directly, but newly added content should be tracked.