AEM 62 - Touch UI Extend Rich Text Link Dialog, Add Rel Attribute Select

Goal


Extend the Link Dialog of Touch UI Rich Text Editor to add Coral Select widget for selecting rel attribute of anchor tag

For AEM 63 check this post

Demo | Package Install | GitHub


rel Attribute select in Link Dialog



rel Applied to Anchor Tag



Solution


1) Login to CRXDE Lite, create folder (nt:folder) /apps/eaem-touchui-extend-rte-link-options

2) Create clientlib (type cq:ClientLibraryFolder/apps/eaem-touchui-extend-rte-link-options/clientlib and set property categories of String type to cq.authoring.dialog and dependencies String[] to underscore

3) Create file ( type nt:file ) /apps/eaem-touchui-extend-rte-link-options/clientlib/js.txt, add the following

                         link-options.js

4) Create file (type nt:file) /apps/eaem-touchui-extend-rte-link-options/clientlib/link-options.js, add the following code

(function ($) {
    "use strict";

    var _ = window._,
        Class = window.Class,
        CUI = window.CUI,
        REL_FIELD = "rel",
        RTE_LINK_DIALOG = "rtelinkdialog";

    if(CUI.rte.ui.cui.CuiDialogHelper.eaemExtended){
        return;
    }

    var EAEMLinkBaseDialog = new Class({
        extend: CUI.rte.ui.cui.LinkBaseDialog,

        toString: "EAEMLinkBaseDialog",

        initialize: function(config) {
            this.superClass.initialize.call(this, config);

            this.$rteDialog = this.$container.find("[data-rte-dialog=link]");

            this.$rteDialog.find(".coral-Popover-content").append(getLinkRelOptionsHtml());
        },

        dlgToModel: function() {
            this.superClass.dlgToModel.call(this);

            var relField = this.getFieldByType(REL_FIELD);

            if(_.isEmpty(relField)){
                return;
            }

            var relVal = relField.val();

            if (_.isEmpty(relVal)) {
                return;
            }

            this.objToEdit.attributes["rel"] = relVal;
        }
    });

    CUI.rte.ui.cui.CuiDialogHelper = new Class({
        extend: CUI.rte.ui.cui.CuiDialogHelper,

        toString: "EAEMCuiDialogHelper",

        instantiateDialog: function(dialogConfig) {
            var type = dialogConfig.type;

            if(type !== RTE_LINK_DIALOG){
                this.superClass.instantiateDialog.call(this, dialogConfig);
                return;
            }

            var $editable = $(this.editorKernel.getEditContext().root),
                $container = CUI.rte.UIUtils.getUIContainer($editable),
                dialog = new EAEMLinkBaseDialog();

            dialog.attach(dialogConfig, $container, this.editorKernel);

            return dialog;
        }
    });

    function getLinkRelOptionsHtml(){
        var html =  "<div class='coral-RichText-dialog-columnContainer'>" +
                    "<div class='coral-RichText-dialog-column'>" +
                    "<coral-select data-type='rel' placeholder='Choose \"rel\" attribute'>";

        var options = ["alternate", "author", "bookmark", "external", "help",
                        "license", "next", "nofollow", "noreferrer", "noopener", "prev", "search", "tag" ];

        _.each(options, function(option){
            html = html + getOptionHtml(option);
        });

        html = html + "</coral-select></div></div>";

        return html;

        function getOptionHtml(option){
            return "<coral-select-item>" + option + "</coral-select-item>"
        }
    }

    CUI.rte.ui.cui.CuiDialogHelper.eaemExtended = true;
})(jQuery);

3 comments:

  1. Hi Sreekanth, I am not able to retrieve saved value from rel/any custom attribute using dlgFromModel. If I am using

    dlgFromModel: function() {
    this.superClass.dlgFromModel.call(this);
    alert(this.objToEdit.attributes["rel"]);
    }

    The alert does not return previously stored value. Please help.

    ReplyDelete
    Replies
    1. hi Anupam - make sure the attribute is added in antisamy check this post http://experience-aem.blogspot.com/2017/09/aem-63-touch-ui-extend-rich-text-link-dialog-add-rel-select.html

      Delete
  2. Sreekanth, any chance you could provide insights on extending the "Target" options list to include a new "Overlay" option that we would use to utilize a modal Overlay "colorbox" implementation?

    IE: We would like to add "Overlay" as an option to this existing drop down:

    li class="coral-SelectList-item coral-SelectList-item--option is-highlighted" data-value="" aria-selected="true" role="option" id="coral-92" tabindex="0">Target
    li class="coral-SelectList-item coral-SelectList-item--option" data-value="_self" aria-selected="false" role="option" id="coral-93">Same Tab
    li class="coral-SelectList-item coral-SelectList-item--option" data-value="_blank" aria-selected="false" role="option" id="coral-94">New Tab
    li class="coral-SelectList-item coral-SelectList-item--option" data-value="_parent" aria-selected="false" role="option" id="coral-95">Parent Frame
    li class="coral-SelectList-item coral-SelectList-item--option" data-value="_top" aria-selected="false" role="option" id="coral-96">Top Frame


    ReplyDelete