RadEditor in Fullscreen mode appears cut off at the right and at the bottom.
In order to fix that, you can add this CSS rule to the page:
<style>
.RadEditor.reFullScreen {
box-sizing:border-box;
}
</style>
<telerik:RadEditor ID="RadEditor1" runat="server" RenderMode="Lightweight">
</telerik:RadEditor>
For the time being you can use the following workaround:
<telerik:RadEditor ID="RadEditor1" runat="server" ></telerik:RadEditor>
<script>
var oldExecute = Telerik.Web.UI.Editor.InsertLinkCommand.prototype.onExecute;
Telerik.Web.UI.Editor.InsertLinkCommand.prototype.onExecute = function () {
this.linkProperties.href = encodeURI(this.linkProperties.href);
oldExecute.call(this);
}
</script>
It should rather select the last cell of the table.
When an input of type text is selected user cannot change its properties from Design mode.
Workaround:
<telerik:RadEditor runat="server" ID="RadEditor1">
<Content>
<input type="text" style="width: 100px; height: 22px;" />
<br />
<textarea></textarea>
</Content>
</telerik:RadEditor>
<script>
Telerik.Web.UI.RadEditor.prototype.getSelectedElement = function (range) {
var editor = this;
var contentArea = editor.get_contentArea();
var $ = $telerik.$;
var $Editor = Telerik.Web.UI.Editor;
var utils = $Editor.Utils;
if (editor.get_renderMode() === Telerik.Web.UI.RenderMode.Mobile) {
var highlighted = $(contentArea).find(".__reTextHighlight,.__reNodeHighlight");
if (highlighted.length) {
var first = highlighted.get(0);
var last = highlighted.last().get(0);
return first === last ? first :
utils.findCommonAncestor(first, last);
}
}
range = range || editor.getDomRange();
if (!range) {
var activeElement;
try {
activeElement = editor.get_document().activeElement;
} catch (ex) { return undefined; }
return $(activeElement).is('input[type=text],input[type=password],textarea') ?
activeElement : undefined;
}
var container = range.commonAncestorContainer;
if (container === contentArea || $.contains(contentArea, container)) {
var selectedNode = $Editor.RangeEdges.commonNode(range);
var isTextNode = utils.isTextNode(selectedNode);
return utils.isTextNode(selectedNode) ? selectedNode.parentNode : selectedNode;
}
};
</script>
http://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx Currently, TabStrip cannot be focused because it's missing AccessKey. All elements in the dialog should be accessible.
The height is bigger than the viewport.
If there are toolbars docked at the left or right, the right toolbar is hidden due to larger width.
You can fix a bit the width by using this code:
<telerik:RadEditor ID="RadEditor1" runat="server" RenderMode="Lightweight" OnClientCommandExecuted="OnClientCommandExecuted">
<Tools>
<telerik:EditorToolGroup>
<telerik:EditorTool Name="AjaxSpellCheck" />
</telerik:EditorToolGroup>
<telerik:EditorToolGroup dockingzone="Left">
<telerik:EditorTool Name="AjaxSpellCheck" />
</telerik:EditorToolGroup>
<telerik:EditorToolGroup dockingzone="Right">
<telerik:EditorTool Name="ToggleScreenMode"></telerik:EditorTool>
</telerik:EditorToolGroup>
</Tools>
</telerik:RadEditor>
<script>
function OnClientCommandExecuted(editor, args) {
if (args.get_commandName() === "ToggleScreenMode" && editor.isFullScreen()) {
var editorId = editor.get_id();
var editorElm = editor.get_element();
var leftToolbar = $telerik.$(editorElm).find("#" + editorId + "Left.reToolBarWrapper");
var rightToolbar = $telerik.$(editorElm).find("#" + editorId + "Right.reToolBarWrapper");
var widthExcess = leftToolbar.width() + rightToolbar.width();
if (widthExcess) {
editorElm.style.width = (parseInt(editorElm.style.width) - widthExcess) + "px";
}
}
}
</script>
The content of RadEditor overflows the height ot the content area in Mobile Safari (tested with IOS 9.3). The issue is reproducible as of version 2015.3.930
Reproduction code:
<telerik:RadEditor ID="emailMessageInput" runat="server" Style="font-size: 12px;" Height="450" Width="600">
<Content>
foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />
</Content>
</telerik:RadEditor>
<br />
<asp:Button ID="btn" runat="server" Text="the editor overflows on an ipad" />
When you change the render mode of RadEditor from Lightweight to Classic programmatically (like in the RenderModes demo: http://demos.telerik.com/aspnet-ajax/editor/examples/rendermodes/defaultcs.aspx), wrong items are loaded in the context menu that is displayed by right-clicking on a table cell.
Workaround: Set Lightweight for RadMenu in web.config:
<add key="Telerik.Web.UI.Menu.RenderMode" value="lightweight" />
The error that is thrown is "Unable to get property 'get_id' of undefined or null reference".
Workaround:
var EditorPrototype = Telerik.Web.UI.RadEditor.prototype;
EditorPrototype.get_rippleZonesConfigurationOriginal = EditorPrototype.get_rippleZonesConfiguration;
EditorPrototype.get_rippleZonesConfiguration = function () {
if (!this._rippleZonesConfiguration) {
this._rippleZonesConfiguration = this.get_rippleZonesConfigurationOriginal();
}
return this._rippleZonesConfiguration;
}
The following error is thrown when RadEditor is set in Inline mode with Material skin:
TypeError: view.modesRowContainer(...) is undefined
Workaround:
Sys.Application.add_load(function () {
var EditorLightweightView = Telerik.Web.UI.Editor.LightweightView;
EditorLightweightView.prototype.modesRowContainerOriginal = EditorLightweightView.prototype.modesRowContainer;
EditorLightweightView.prototype.modesRowContainer = function () {
return this.modesRowContainerOriginal() || {};
}
});
The problem is only reproducible in Chrome. The error does not affect the content or the functionality of TrackChanges. Chrome throws this exception because it tries to select unavailable DOM range.
You can apply this CSS override to bring back the RadEditor defaults for the HTML mode.
.RadForm .RadEditor .reTextArea {
padding: 0;
width: 100%;
height: 100%;
border:0;
box-sizing: border-box;
font-size: 11px;
font-family: inherit;
}
Based on customer feedback: 1) Toggle full screen 2) Finish AJAX spell checker 3) Then full screen icon is not selected even the editor is in full screen mode
Programmatically added EditorToolGroup to the RadEditor's Ribbonbar is not displayed when the control is localized in Lightweight rendering.
Communication between Style Builder and Table Wizard does not work.
Having a font/span tag with applied inline font-size style cannot be formatted by FontSize tool.
This is a possible workaround that removes font-size inline style when size attribute is to be added:
<telerik:RadEditor runat="server" ID="RadEditor1" OnClientCommandExecuting="OnClientCommandExecuting">
<Tools>
<telerik:EditorToolGroup>
<telerik:EditorTool Name="FontSize" />
</telerik:EditorToolGroup>
</Tools>
<Content>
<p><span style="font-size:15px;">text</span></p>
</Content>
</telerik:RadEditor>
<script>
function OnClientCommandExecuting(editor, args) {
var command = args.get_commandName();
if (command === "FontSize") {
$telerik.$(editor.getSelectedElement()).css("font-size", "");
}
}
</script>