When a tool has a longer name, part of the text drops to a new line, and causes incorrect layout.
To resolve you can use the following CSS rule:
.reDropDownBody a.reTool.reToolText {
white-space: nowrap;
}
When pasting list items over an existing one, the list from the clipboard is added to new UL element. The proper behavior it should be to paste the existing content and adapt it to the existing list.
When EnableTrackChanges property of RadEditor is set to true: -The font name of the written text in RadEditor cannot be change and instead the default one is used. This behavior is observed under FireFox, Chrome and Safari. The workaround is to mark the already written text and then set the desired font. -The chosen font size from the toolbar returns to its default value when the cursor changes its position and then returns back to its previous position. This behavior is observed under FireFox.
Set the NewLineMode to br tag. Then inserting a list and closing it appends the following: <p> </p> It should be appending a <br> element corresponding to the set mode.
Using an MS Word file with an inline image or an carriage return (<br/>) to paste the content in the editor, the ConvertWordList StripFormatting option removes the <img /> and <br /> elements.
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 using the Flash Manager to add a flash object into the content, causes the HTML mode to be non editable.
The following example code is a possible workaround for this behavior:
<telerik:RadEditor ID="RadEditor1" runat="server" OnClientModeChange="OnClientModeChange">
</telerik:RadEditor>
<script type="text/javascript">
function OnClientModeChange(editor, args) {
var $ = $telerik.$,
mode = editor.get_mode(),
contentAreaElement = editor.get_contentArea(),
editorModes = Telerik.Web.UI.EditModes;
if (mode === editorModes.Html) {
$(contentAreaElement).hide();
} else {
$(contentAreaElement).show();
}
}
</script>
The resize handles of the ImageEditor's drawing tools are displaced when the edited is zoomed (both zoomed in or out).
When a link is highlighted in the content, the RadEditor does not seem to recognize it as an anchor element. Due to that the the properties inspection module do not show the expected properties and the Hyperlink Manager do not work also.
Steps to reproduce the issue:
1) Run the code below in IE11
2) Set background color to the "some text" cell by right clicking and then selecting cell property through the context menu.
3) Switch to design - there are many nbps's added.
ASPX:
<telerik:RadEditor ID="RadEditor1" runat="server">
<Content>
<table>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>
<table>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>some text </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</Content>
</telerik:RadEditor>
For the time being you can place the following JavaScript workaround below the editor's declaration:
<script type="text/javascript">
if ($telerik.isIE) {
Telerik.Web.UI.Editor.CommandList.SetCellProperties = function (commandName, editor, commandArgs) {
var $ECL = Telerik.Web.UI.Editor.CommandList;
var argument = $ECL._getTableArgument(editor, 2, false, true);
if (!argument) {
alert(editor.getLocalizedString("cellwarning"));
return false;
}
$ECL._getDialogArguments(argument, "TABLE", editor, commandName);
var previousTable = $ECL._getParentTable(editor);
var callbackFunction = $ECL.getCallbackFunction(commandArgs, function (sender, args) {
$telerik.$(args.tableToModify).insertAfter(previousTable);
$telerik.$(previousTable).remove();
if (args.styleSheetToImport)
$telerik.$(args.styleSheetToImport).insertAfter(args.tableToModify);
if (args.styleSheetToRemove)
$telerik.$(args.styleSheetToRemove).remove();
});
editor.showDialog("TableWizard", argument, callbackFunction);
return false;
}
}
</script>
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.
When the RadEditor is used on Chrome, it is not focused and you click on the empty space in the content area or call the client-side function 'setFocus', the cursor in the content area will not appear, because the editor does not get the focus.
You can use the following workaround to avoid the problem when the editor's content is clicked:
<telerik:RadEditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad">
</telerik:RadEditor>
<script type="text/javascript">
function OnClientLoad(editor, args) {
if ($telerik.isChrome) {
setTimeout(function () {
var body = editor.get_contentArea();
var contentElm = editor.get_contentAreaElement();
body.style.height = (contentElm.offsetHeight - 10) + "px";
}, 0);
}
}
</script>
The RadEditor is posting multiple symbols when you select to insert a symbol. This happen when the RenderMode is set to LightWeight. The problem is reproducible also when inserting code snippets via the "Insert Code snippet" tool.
video - http://screencast.com/t/DfBMWrW4Px7I
Steps to reproduce:
1. Open http://demos.telerik.com/aspnet-ajax/editor/examples/rendermodes/defaultcs.aspx
2. Try to insert a symbol through "Insert Symbol" command
Result: Two symbols are inserted instead of one
When opening a RadEditor under Chrome and switch to HTML mode in the bottom left corner, close to the Design title there is missing a small part of the border.
FileBrowser dialogs cannot upload files greater than 200kb when AsyncUpload is disabled (i.e., the Upload control is used instead).
The click event of the button is not prevented and the native anchor behavior occurs. This causes the page to scroll to the top and a # to appear in the URL.
You can use the following code snippet to prevent the native click behavior of the anchor element and workaround the issue:
<telerik:RadEditor runat="server" ID="RE1" ToolbarMode="Floating" OnClientLoad="OnClientLoad"></telerik:RadEditor>
<script>
function OnClientLoad(sender, args) {
$telerik.$(".RadEditor a[title='Toggle Floating Toolbar']").attr("href", "javascript:void(0);")
}
</script>
Using the Image Map Editor to create a mapped area over the entire image, causes the image to be unelectable.
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>