Creating a complex list nesting, sometime includes creating empty parent list item to include entire sub lists. In Chrome, Firefox and Opera pressing backspace in such items causes incorrect behavior and formatting. This is actually a browser behavior, and it stems from the deletion of the BR tag inside the parent lists. Under IE, this is handled by native DOM operation that removes the entire parent list item and attaching its sub child's to the previous available one.
Currently the lightweight rendering of RibbonBar used in RadEditor with lightweight rendering leads to visual issues.
When trying to align selected text in a table, not all cells are being aligned correctly under IE and Chrome. In Firefox only one table cell is being applied with the chosen modification and not the selected text. Under IE and Chrome, when a table row element is in the selection, the child td elements are not processed by the Align command. Under FF when the table text is selected, the selected element is only the first TD element. The problem under IE and Chrome could be resolved using the following override of the executeOnNode(): <telerik:RadEditor runat="server" ID="RadEditor1"> </telerik:RadEditor> <script type="text/javascript"> Telerik.Web.UI.Editor.AlignCommand.prototype.executeOnNode = function (node) { var utils = Telerik.Web.UI.Editor.Utils; if (utils.isTag(node, "table")) return;//prevent alignment of tables since this has no effect in browsers. if (utils.isTag(node, "tr")) { var nodes = node.childNodes; var nodeArr = []; for (var i = 0; i < nodes.length; i++) { nodeArr.push(nodes[i]); } while (nodeArr.length) { var childNode = nodeArr.shift(); if (this.isSuitableNode(childNode)) this.executeOnNode(childNode); else this.executeInlineNode(childNode); } return; } if (utils.isTag(node, "ul") || utils.isTag(node, "ol")) return this.executeDomCommand($.makeArray(node.children)); if (utils.isTag(node, "img")) { if (this.nodes.length == 0 && this.canAlignImage()) { if (this.options.align == "none") this.alignBlock(this.getBlockContainer(node)); return this.alignImage(node); } else { this.removeImageAlign(node); var imageContainer = this.getBlockContainer(node); if (imageContainer != node) this.executeOnNode(imageContainer); else return this.executeInlineNode(node); } } this.alignBlock(node); }; </script>
Please add "bootstrap" to drop down list of available skins to base a NEW skin on from style builder. I wish to make some color changes (blue to red) but require all the css and image files. Thanks.
Creating a large page with RadEditor control and opening the mentioned dialog will scroll the page to the top. This causes the user to loose visual contact with the Editor. The issue is due to the automatic textarea focusing in the clientInit() method of the dialog's logic. To resolve the issue you should modify the dialog and remove the focusing functionality. To do so follow the next steps: 1. Follow the Custom Built-in dialogs approach (http://demos.telerik.com/aspnet-ajax/editor/examples/externaldialogspath/defaultcs.aspx) to use an external and later modified Plain Paste Dialog - the MozillaPasteTextDialog.ascx; 2. Find the clientInit() method trough the client-side logic of the MozillaPasteTextDialog.ascx file; 3. Remove the this._container.focus() line. You can also find attached a sample page with the fix placed, so that you can examine it.
For the time being you can use the following workaround: CSS: <style> .RadForm_Bootstrap.RadForm.rfdButton form a.rfdSkinnedButton { padding: 0px; height: 32px; } .RadForm_Bootstrap.RadForm.rfdButton form a.rfdSkinnedButton input.rfdDecorated { height: 32px; } </style> ASPX: <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> <telerik:RadSkinManager ID="RadSkinManager1" runat="server" Skin="Bootstrap" ShowChooser="true"></telerik:RadSkinManager> <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" /> <asp:Button ID="Button1" Text="Click" runat="server" />