AEM 6 SP1 - Rich Text Editor Classic UI Color Palette

Goal

Add a Color Picker to Rich Text Editor of Classic UI ( not Touch UI )

Demo | Package Install

Demo shows dialog of foundation text component modified to add the color picker config. This is just for demonstration only (on Geometrixx pages), ideally the foundation components should never be altered...

Please leave a comment if you find bug / fix. The plugin has to be enhanced to support removal of added colors...


Picker with Default Colors


Configuration




Button



Picker





Custom Colors 


Configuration





Picker

Solution

1) Login to CRXDE Lite, create folder (nt:folder) /apps/rte-color-picker

2) Create clientlib (type cq:ClientLibraryFolder) /apps/rte-color-picker/clientlib and set a property categories of String type to cq.widgets

3) Create file ( type nt:file ) /apps/rte-color-picker/clientlib/js.txt, add the following

                         color-picker.js

4) Create file (type nt:file) /apps/rte-color-picker/clientlib/color-picker.js, add the following code

CQ.Ext.ns("ExperienceAEM");

ExperienceAEM.ColorPicker = {
    ADD_COLOR_CMD : "addcolor"
};

ExperienceAEM.ColorPicker.Plugin = new Class({
    toString: "ColorPickerPlugin",
    extend: CUI.rte.plugins.Plugin,
    P: ExperienceAEM.ColorPicker,

    addPickerUI: null,

    getFeatures: function() {
        return [ this.P.ADD_COLOR_CMD ];
    },

    initializeUI: function(tbGenerator) {
        var plg = CUI.rte.plugins;

        if (this.isFeatureEnabled(this.P.ADD_COLOR_CMD)) {
            this.addPickerUI = tbGenerator.createElement(this.P.ADD_COLOR_CMD, this, true, "Add Color");
            tbGenerator.addElement("format", plg.Plugin.SORT_FORMAT,this.addPickerUI,1000);
        }
    },

    execute: function(cmd, value, env) {
        if (cmd == this.P.ADD_COLOR_CMD) {
            this.showDialog(env.editContext);
        }
    },

    showDialog: function(context) {
        var editorKernel = this.editorKernel, dm = editorKernel.getDialogManager();
        var config = this.config;

        var colorPalette = {
            xtype: "colorpalette"
        };

        if(config){
            if(config.defaultColor){
                colorPalette.value = config.defaultColor;
            }

            if(config.colors && config.colors.length > 0){
                colorPalette.colors = config.colors;
            }
        }

        var dialogConfig = {
"jcr:primaryType": "cq:Dialog",
            title: "Color Picker",
            modal: true,
            width: 300,
            height: 200,
            items: [ {
                    xtype: "panel",
                    layout: "form",
                    padding: "20px 0 0 10px",
                    items: [ colorPalette ]
            }],
            ok: function() {
                var palette = this.findByType("colorpalette")[0];

                this.close();

                if(palette.value){
                    editorKernel.relayCmd(ExperienceAEM.ColorPicker.ADD_COLOR_CMD, palette.value);
                }
            }
        };

        dm.show(CQ.WCM.getDialog(dialogConfig));
    },

    notifyPluginConfig: function(pluginConfig) {
        pluginConfig = pluginConfig || { };

        CUI.rte.Utils.applyDefaults(pluginConfig, {
"tooltips": {
"addcolor": {
"title": "Add Color",
"text": "Add Color"
                }
            }
        });

        this.config = pluginConfig;
    },

    updateState: function(selDef) {
        if(this.addPickerUI){
            this.addPickerUI.setSelected(false);
        }
    }
});

CUI.rte.plugins.PluginRegistry.register("colorpicker", ExperienceAEM.ColorPicker.Plugin);

ExperienceAEM.ColorPicker.Cmd = new Class({
    toString: "ColorPicker",
    extend: CUI.rte.commands.Command,

    P: ExperienceAEM.ColorPicker,

    isCommand: function(cmdStr) {
        return (cmdStr == this.P.ADD_COLOR_CMD);
    },

    getProcessingOptions: function() {
        var cmd = CUI.rte.commands.Command;
        return cmd.PO_SELECTION | cmd.PO_NODELIST;
    },

    addColor: function(execDef){
        var nodeList = execDef.nodeList;

        if(!nodeList || !execDef.value){
            return;
        }

        //todo: handle color remove
        //add your custom tags here with pre defined css classes or styles
        try{
            nodeList.surround(execDef.editContext, "span", { style: "color:#" + execDef.value } );
        }catch(err){
        }
    },

    execute: function(execDef) {
        if(execDef.command == this.P.ADD_COLOR_CMD){
            this.addColor(execDef);
        }
    }
});

CUI.rte.commands.CommandRegistry.register("colorpicker", ExperienceAEM.ColorPicker.Cmd);

5) Add necessary CSS. Create folder (nt:folder) /apps/rte-color-picker/clientlib/themes

6) Create clientlib (type cq:ClientLibraryFolder) /apps/rte-color-picker/clientlib/themes/default and set a property categories of String type to cq.widgets

7) Create file (nt:file) /apps/rte-color-picker/clientlib/themes/default/css.txt, add the following

                    css/color-picker.css

8) Create folder (nt:folder) /apps/rte-color-picker/clientlib/themes/default/css and add the icon addcolor.png

9) Create file (nt:file) /apps/rte-color-picker/clientlib/themes/default/css/color-picker.css, add the following code. RTE looks for css classes x-edit-addcolor (for the plugin toolbar button addcolor)

#CQ .x-html-editor-tb .x-edit-addcolor {
    background: url(addcolor.png) center no-repeat;
}

10) Add any text component with RichText editor and in the rtePlugins path of dialog add colorpicker node to enable color picker plugin



11) The extension structure in CRX DE Lite