AEM 63 SP1 - Touch UI Extend Rich Text Link Dialog, Remove Parent Frame option from Target Select


Extend the Link Dialog of Touch UI Rich Text Editor to remove Parent Frame option from Target Coral Select widget

For adding new widget to Link Dialog check this post

Demo | Package Install | Github

Product Link Dialog

Extended Link Dialog

                        Parent Frame removed from the list of Target options


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

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

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


4) Create file (type nt:file) /apps/eaem-touchui-extend-rte-remove-target-options/clientlib/remove-target-options.js, add the following code (#27 removes the parent frame option)

(function ($) {
    "use strict";

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


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

        toString: "EAEMLinkBaseDialog",

        initialize: function(config) {
  , config);

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

            var $target = this.$rteDialog.find("coral-select"),
                $parent = $target.find("coral-select-item[value='_parent']");

            //remove parent frame option

    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){
      , dialogConfig);

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

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

            return dialog;

    CUI.rte.ui.cui.CuiDialogHelper.eaemExtended = true;

No comments:

Post a Comment