AEM 6.3.1.0 - Touch UI Rich Text Plugin Selected Visual Indicator

Goal

Add a background color visual indicator for plugin selected in Rich Text editor

Demo | Package Install | Github


Product

Extension

Solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create folder /apps/eaem-touch-rte-add-bgcolor-selected-plugin

2) Create node /apps/eaem-touch-rte-add-bgcolor-selected-plugin/clientlib of type cq:ClientLibraryFolder and add a String property categories with value rte.coralui3

3) Create file (nt:file) /apps/eaem-touch-rte-add-bgcolor-selected-plugin/clientlib/js.txt and add

                       plugin-bg-color.js

4) Create file (nt:file) /apps/eaem-touch-rte-add-bgcolor-selected-plugin/clientlib/plugin-bg-color.js and add the following code

(function ($, $document) {
    "use strict";

    var SEL_BG_COLOR = "#9999ff",
        extended = false;

    if(extended){
        return;
    }

    extended = true;

    extendSetSelected();

    function extendSetSelected(){
        var elementImpl = CUI.rte.ui.cui.ElementImpl;

        if(!elementImpl){
            return;
        }

        var origFn = elementImpl.prototype.setSelected;

        elementImpl.prototype.setSelected = function (isSelected, suppressEvent) {
            origFn.call(this, isSelected, suppressEvent);
            this.$ui.css("background-color", isSelected ? SEL_BG_COLOR : "");
        }
    }
}(jQuery, jQuery(document)));