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>
A proper workaround for this problem is applying this CSS rule:
div.RadEditor .RadRibbonBar .rrbButton img.rrbButtonImage {
top:-7px;
}
The main issue is the inconsistent behavior of the borders around the content area.
The initial problem is related with the JS error, because of which the editor's initialization is interrupted.
You can workaround this by incorporating this piece of code:
<telerik:RadWindow ID="RadWindow1" runat="server" Width="805" Height="450" VisibleOnPageLoad="true">
<ContentTemplate>
<telerik:RadEditor runat="server" ID="RadEditor1" Height="200" Width="400" >
</telerik:RadEditor>
</ContentTemplate>
</telerik:RadWindow>
<script type="text/javascript">
var oldCommand = Telerik.Web.UI.RadEditor.prototype.toggleEnhancedEdit;
Telerik.Web.UI.RadEditor.prototype.toggleEnhancedEdit = function (newValue) {
if ($telerik.isSafari && typeof (newValue) != "undefined" && false == this.disableContentAreaStylesheet(newValue)) {
window.setTimeout(Function.createDelegate(this, function () {
this.disableContentAreaStylesheet(newValue);
}), 200);
} else {
oldCommand.call(this, newValue);
}
};
</script>
The tools are not respected by the toolgroups under IE7 and IE7 standards. This issue causes incorrect layout at resizing and overlay issues of floated tools.
The problem is introduced because the toolgroup elements does not have a properly set width.
Possible resolution is setting a proper width to every UL at the load event of the editor:
<telerik:RadEditor runat="server" ID="RadEditor1"
OnClientLoad="OnClientLoad"></telerik:RadEditor>
<script type="text/javascript">
function OnClientLoad(editor, args) {
if (editor.isVisible()) {
fixToolbarsInIE(editor);
} else {
editor.add_firstShow(function () {
setTimeout(function () {
fixToolbarsInIE(editor);
}, 0);
})
}
}
function fixToolbarsInIE(editor) {
if ($telerik.isIE) {
var $ = $telerik.$;
var editorID = editor.get_id();
var topTD = document.getElementById(editorID + "Top");
var toolGroupElements = $(topTD).find(".reToolbar");
for (var i = 0, l = toolGroupElements.length; i < l; i++) {
calculateTools(toolGroupElements[i]);
}
}
}
function calculateTools(toolGroup) {
var tools = toolGroup.children;
var size = 0;
for (var i = 0, l = tools.length; i < l; i++) {
var tool = tools[i];
size += tool.offsetWidth;
}
toolGroup.style.width = size + "px";
}
</script>
This problem causes incorrect behavior and inconvenience among users because when the browser crashes all content is lost.
This issue causes an annoying flickering of the page and inconvenient typing experience of the user.
When the Editor is configured to occupy size in percentages and the user switches from default to full screen mode and vice versa, the content area of the control gets broken. The problem is reproducible in all browsers.
Video: screencast
As a temporary workaround you can attach a handler to the Editor's ClientCommandExecuted event and repaint the Editor in case the current command is ToggleScreenMode:
<div style="width: 700px; height: 500px">
<telerik:RadEditor ID="RadEditor1" runat="server" Width="100%" Height="100%" OnClientCommandExecuted="OnClientCommandExecuted">
<Content>
<p>dsadasdasdad dasdasdd das dasdasdasd <br />
dsadasdasdad dasdasdd das dasdasdasd <br />
dsadasdasdad dasdasdd das dasdasdasd <br />
dsadasdasdad dasdasdd das dasdasdasd <br />
dsadasdasdad dasdasdd das dasdasdasd <br />
</p>
</Content>
</telerik:RadEditor>
</div>
<script>
function OnClientCommandExecuted(editor, args) {
if (args.get_commandName() == "ToggleScreenMode") {
editor.repaint();
}
}
</script>
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.