AEM 61 - Extend Classic UI Rich Text Editor Table Plugin, Add Summary Field

Goal

Extend Classic UI Rich Text Editor (RTE) widget to add a field for Table Summary

Demo | Package Install


Table Properties Dialog with Summary





Table Source with Summary

Solution

1) Login to CRXDE Lite, create folder (nt:folder) /apps/classicui-rte-table-summary

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

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

                         summary.js

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

CQ.Ext.ns("ExperienceAEM");

ExperienceAEM.ToolkitImpl = new Class({
    toString: "EAEMToolkitImpl",

    extend: CUI.rte.ui.ext.ToolkitImpl,

    //extend the dialog manager
    createDialogManager: function(editorKernel) {
        return new ExperienceAEM.ExtDialogManager(editorKernel);
    }
});

CUI.rte.ui.ToolkitRegistry.register("ext", ExperienceAEM.ToolkitImpl);

ExperienceAEM.ExtDialogManager = new Class({
    toString: "EAEMExtDialogManager",

    extend: CUI.rte.ui.ext.ExtDialogManager,

    //add the summary widget to table properties dialog
    createTablePropsDialog: function(cfg) {
        var dialog = this.superClass.createTablePropsDialog.call(this, cfg);

        var fields = dialog.findByType("form")[0];

        fields.add({
"itemId": "summary",
"name": "summary",
"xtype": "textarea",
"width": 170,
"fieldLabel": "Summary"
        });

        dialog.setHeight(400);

        return dialog;
    }
});

ExperienceAEM.Table = new Class({
    toString: "EAEMTable",

    extend: CUI.rte.commands.Table,

    //add/remove the summary
    transferConfigToTable: function(dom, execDef) {
        this.superClass.transferConfigToTable.call(this, dom, execDef);

        var com = CUI.rte.Common,
            config = execDef.value;

        if (config.summary) {
            com.setAttribute(dom, "summary", config.summary);
        } else {
            com.removeAttribute(dom, "summary");
        }
    }
});

CUI.rte.commands.CommandRegistry.register("_table", ExperienceAEM.Table);