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 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;
}
Workaround: Set Lightweight for RadMenu in web.config:
<add key="Telerik.Web.UI.Menu.RenderMode" value="lightweight" />
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.
Possible option is to use the ToolsFile property from the code behind in order to configure a ToolsFile.xml file. RadEditor1.ToolsFile = "~/ToolsFile.xml";
http://demos.telerik.com/aspnet-ajax/editor/examples/trackchanges/defaultcs.aspx Use the following markup: <p><ins author="RadEditorUser" command="Insert" timestamp="1461912623680" title="Inserted by RadEditorUser on 4/29/2016, 9:50:23 AM" class="reU0">Apple</ins></p> <p> </p> <p> </p> <p><ins author="RadEditorUser" command="Insert" timestamp="1461912654319" title="Inserted by RadEditorUser on 4/29/2016, 9:50:54 AM" class="reU0">Banana</ins></p> Place the cursor in front of Banana Press backspace Expected: The empty paragraph is deleted OR the empty paragraph deletion is tracked (leave the preferred behavior in the comments) Actual: The last letter of the first paragraph is deleted
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" />
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>
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.
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>
It should rather select the last cell of the table.
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>
For a better description of the issue and reproduction steps, please view the ticket: http://www.telerik.com/account/support-tickets/view-ticket?threadid=1010438 If a user clicks 'Ignore All' for a misspelled word, the focus moves to the next misspelled word after the last word included in the ignore all list. This becomes problematic when editing a large quantity of text and the user's trying to go through things in order, but the focus moves to the very bottom of the content area. In MS Word, it works as our users expect it would. Once 'Ignore All' is chosen, the very next misspelled word is highlighted.
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>
You can workaround this issue by resetting the content area's height only for IE:
<telerik:RadEditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad">
</telerik:RadEditor>
<script>
function OnClientLoad(editor, args) {
if ($telerik.isIE) editor.get_contentArea().style.height = "auto";
}
</script>