Completed
Last Updated: 07 Jun 2016 09:04 by ADMIN
ADMIN
Ianko
Created on: 30 May 2014 07:27
Category: UI for ASP.NET AJAX
Type: Feature Request
0
Improve the ForeColor and BackColor commands to work more approapriatly with lists
When a list item is set with a color or background color, only the text gets modified. A more appropriate user experience would be if the whole list item get affected by the chosen value.

The following custom Inline Command modification changes the behavior of the ForeColor command and provides more desktop-like text editing experience to the users.

<telerik:RadEditor ID="RadEditor1" runat="server">
<Content>
    <ol>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
    </ol>
</Content>
</telerik:RadEditor>

<script type="text/javascript">
    (function ($, $E, utils) {
        $E.ForeColor = function (editor, commandSettings, options) {
            $E.ForeColor.initializeBase(this, [editor, commandSettings, options]);
        };

        $E.ForeColor.prototype = {
            formatFragment: function (fragment) {
                var formatNode;
                var parent = fragment.getParent();

                var parentFormatted = this.findSameFormattedAncestor(parent);
                if (parentFormatted && this.hasSameFormattingValue(parentFormatted)) {
                    return;
                }
                if (this.shouldFormatParentNode(fragment)) {
                    this.formatNode(parentFormatted || parent, true);
                }
                else {
                    for (var i = 0; i < fragment.nodes.length; i++) {
                        var node = fragment.nodes[i];
                        if (this.isMarker(node) || this.hasSameFormatting(node)) {
                            continue;
                        }
                        if (utils.isTag(node, 'font')) {
                            this.formatFont(node);
                        }
                        else {
                            var nodeName = this.settings.tag || "SPAN";
                            if (node.nodeName == nodeName && !node.parentNode.style[this.settings.cssName]) {
                                this.formatNode(node);
                            }
                            else if ((node.parentNode.nodeName == nodeName || node.parentNode.nodeName === "LI") &&
                                this.getNodesTextContent([node]) == this.getNodesTextContent([node.parentNode])) {
                                this.formatNode(node.parentNode);
                            }
                            else {
                                formatNode = this.createInlineNode();
                                fragment.insertBeforeFirst(formatNode);
                                fragment.appendTo(formatNode);
                            }
                        }
                    }
                }
            }
        };

        $E.ForeColor.registerClass("Telerik.Web.UI.Editor.ForeColor", $E.InlineCommandWithValue);
    })($telerik.$, Telerik.Web.UI.Editor, Telerik.Web.UI.Editor.Utils);
</script>

0 comments