AEM 61 - Touch UI Rich Text Editor Remove Bold and Add Strong Plugin

Goal


Remove the Bold plugin in TouchUI Rich Text Editor and add Strong plugin for semantic markup

AEM RTE Bold Plugin wraps text with "b" tag by default, to make the plugin wrap text with strong tag, add nt:unstructured nodes htmlRules/docType/typeConfig with property useSemanticMarkup=true; if you are happy with it, avoid this extension

Demo shows dialog of foundation text component modified to add the plugin config (/libs/foundation/components/text/dialog/items/tab1/items/text/rtePlugins). This is just for demonstration only (on Geometrixx pages), ideally the foundation components should never be altered...

Demo (download for better view) | Package Install


Plugin Configuration



Semantic Markup Configuration



Inline Editor

Full Screen Editor




Solution


1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create folder /apps/touchui-rte-strong-plugin

2) Create node /apps/touchui-rte-strong-plugin/clientlib of type cq:ClientLibraryFolder and add a String property categories with value rte.coralui2

3) Create file (nt:file) /apps/touchui-rte-strong-plugin/clientlib/js.txt and add

                       strong.js

4) Create file (nt:file) /apps/touchui-rte-strong-plugin/clientlib/strong.js and add the following code.

(function($, CUI){
    var ExperienceAEM = {
        GROUP: "experience-aem",
        STRONG_FEATURE: "strong",
        BOLD: "format#bold"
    };

    function getStrongFeature() {
        return ExperienceAEM.GROUP + "#" + ExperienceAEM.STRONG_FEATURE;
    }
 
    //extend toolbar builder to register strong styles
    ExperienceAEM.CuiToolbarBuilder = new Class({
        toString: "EAEMCuiToolbarBuilder",
 
        extend: CUI.rte.ui.cui.CuiToolbarBuilder,
 
        //add strong icon to the existing set
        _getUISettings: function(options) {
            var uiSettings = this.superClass._getUISettings(options),
                strongFeature = getStrongFeature();

            //inline toolbar
            var items = uiSettings["inline"]["popovers"]["format"].items;

            //insert strong feature
            if(items.indexOf(strongFeature) == -1){
                items.push(strongFeature);
            }

            //remove bold feature
            if(items.indexOf(ExperienceAEM.BOLD) >= 0){
                items = items.splice(items.indexOf(ExperienceAEM.BOLD), 1);
            }

            //fullscreen toolbar
            items = uiSettings["fullscreen"]["toolbar"];

            //insert strong feature
            if(items.indexOf(strongFeature) == -1){
                items.splice(3, 0, strongFeature);
            }

            //remove bold feature
            if(items.indexOf(ExperienceAEM.BOLD) >= 0){
                items = items.splice(items.indexOf(ExperienceAEM.BOLD), 1);
            }

            if(!this._getClassesForCommand(strongFeature)){
                this.registerAdditionalClasses(strongFeature, "coral-Icon coral-Icon--textStyle");
            }

            return uiSettings;
        }
    });
 
    ExperienceAEM.ToolkitImpl = new Class({
        toString: "EAEMToolkitImpl",
 
        extend: CUI.rte.ui.cui.ToolkitImpl,
 
        createToolbarBuilder: function() {
            return new ExperienceAEM.CuiToolbarBuilder();
        }
    });
 
    CUI.rte.ui.ToolkitRegistry.register("cui", ExperienceAEM.ToolkitImpl);
 
    ExperienceAEM.TouchUIStrongPlugin = new Class({
        toString: "TouchUIStrongPlugin",
 
        extend: CUI.rte.plugins.Plugin,
 
        pickerUI: null,
 
        getFeatures: function() {
            return [ ExperienceAEM.STRONG_FEATURE ];
        },
 
        initializeUI: function(tbGenerator) {
            var plg = CUI.rte.plugins;
 
            if (this.isFeatureEnabled(ExperienceAEM.STRONG_FEATURE)) {
                this.pickerUI = tbGenerator.createElement(ExperienceAEM.STRONG_FEATURE, this, true, "Wrap Strong");
                tbGenerator.addElement("format", plg.Plugin.SORT_FORMAT, this.pickerUI, 120);
            }
        },
 
        execute: function(id) {
            this.editorKernel.relayCmd(id);
        },
 
        //to mark the strong icon selected/deselected
        updateState: function(selDef) {
            var hasUC = this.editorKernel.queryState(ExperienceAEM.STRONG_FEATURE, selDef);
 
            if (this.pickerUI != null) {
                this.pickerUI.setSelected(hasUC);
            }
        },
 
        notifyPluginConfig: function(pluginConfig) {
            pluginConfig = pluginConfig || { };
 
            var defaults = {
                "tooltips": {
                    "strong": {
                        "title": "Wrap Strong",
                        "text": "Wrap Strong"
                    }
                }
            };
 
            CUI.rte.Utils.applyDefaults(pluginConfig, defaults);
 
            this.config = pluginConfig;
        }
    });
 
    CUI.rte.plugins.PluginRegistry.register(ExperienceAEM.GROUP, ExperienceAEM.TouchUIStrongPlugin);
 
    ExperienceAEM.StrongCmd = new Class({
        toString: "StrongCmd",
 
        extend: CUI.rte.commands.Command,
 
        isCommand: function(cmdStr) {
            return (cmdStr.toLowerCase() == ExperienceAEM.STRONG_FEATURE);
        },
 
        getProcessingOptions: function() {
            var cmd = CUI.rte.commands.Command;
            return cmd.PO_SELECTION | cmd.PO_BOOKMARK | cmd.PO_NODELIST;
        },
 
        _getTagObject: function() {
            return {
                "tag": "strong"
            };
        },
 
        execute: function(execDef) {
            var selection = execDef.selection;
 
            if (!selection) {
                return;
            }
 
            var nodeList = execDef.nodeList;
 
            if (!nodeList) {
                return;
            }
 
            var common = CUI.rte.Common;
            var context = execDef.editContext;
 
            var tagObj = this._getTagObject();
 
            var tags = common.getTagInPath(context, selection.startNode, tagObj.tag, tagObj.attributes);
 
            if (tags == null) {
                nodeList.surround(execDef.editContext, tagObj.tag, tagObj.attributes);
            } else {
                nodeList.removeNodesByTag(execDef.editContext, tagObj.tag, tagObj.attributes, true);
            }
        },
 
        queryState: function(selectionDef) {
            var common = CUI.rte.Common;
            var context = selectionDef.editContext;
 
            var selection = selectionDef.selection;
            var tagObj = this._getTagObject();
 
            return (common.getTagInPath(context, selection.startNode, tagObj.tag, tagObj.attributes) != null);
        }
    });
 
    CUI.rte.commands.CommandRegistry.register(ExperienceAEM.STRONG_FEATURE, ExperienceAEM.StrongCmd);
})($, window.CUI);

4 comments:

  1. Hi , Can we add multiple plugins with the rte.coralUI2 category name.
    I am facing the problem when I am adding 2 plugins with the same category...?

    ReplyDelete
  2. Sreekanth:
    Tried this on AEM6.4 , but does not work. As part of troubleshooting I changed the clientlibs categories as 'rte.coralui3' and got the strong.js being executed, and saw the 'b' command is getting removed. But the 'S' command is not getting added to tool bar. Any clue?
    Thanks
    cqCoder.

    ReplyDelete
  3. Sreekanth:
    I tried this on AEM 6.3 but didnot work. The Bold command is getting removed but S command is not getting added. Any help in this regard.

    Thanks

    ReplyDelete