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

Goal


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

Classic UI RTE Table extension for Summary is available here

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

For extending Link Dialog in AEM 62 check this post

Demo | Package Install


Table Properties Dialog with Summary





Table Source with Summary



Solution


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

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

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

                         summary.js

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

(function ($) {
    "use strict";

    var _ = window._,
        Class = window.Class,
        CUI = window.CUI,
        EAEM_TABLE = null,
        COLUMN_CONTAINER = ".coral-RichText-dialog-columnContainer",
        SUMMARY_SEL = ".coral-RichText-dialog--tableprops textarea[data-type=\"summary\"]",
        SUMMARY_HTML = '<div class="coral-RichText-dialog-columnContainer">'
                            + '<div class="coral-RichText-dialog-column">'
                                +  'Summary'
                            +  '</div>'
                            +  '<div class="coral-RichText-dialog-column">'
                                +  '<textarea data-type="summary" class="coral-Textfield coral-Textfield--multiline coral-RichText--large"></textarea>'
                            +  '</div>'
                        + '</div>';

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

    CUI.rte.ui.cui.TablePropsDialog = new Class({

        extend: CUI.rte.ui.cui.TablePropsDialog,

        toString: "EAEMTablePropsDialog",

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

            this.$summary = this.$container.find(SUMMARY_SEL);

            if(!_.isEmpty(this.$summary)){
                return;
            }

            this.$caption = this.$container.find(".coral-RichText-dialog--tableprops input[data-type=\"caption\"]");

            $(SUMMARY_HTML).insertBefore( this.$caption.closest(COLUMN_CONTAINER) );

            this.$summary = this.$container.find(SUMMARY_SEL);

            this.propertyItems.push(this.$summary);
        }
    });

    EAEM_TABLE = new Class({
        toString: "EAEMTable",

        extend: CUI.rte.commands.Table,

        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", EAEM_TABLE);

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

8 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. Hi Sreekanth,
    Thanks for the demo.
    I was able to see "Table" plugin for "text" component in granite/touch dialog. I believe the "Table" plugin needs to be configured in the classic dialog(/libs/foundation/components/text/dialog/items/tab1/items/text/rtePlugins/table). Is this understanding correct? Or is there any additional configuration for the plugin to be visible in granite/touch dialog?
    I could not see the "Table" plugin itself for my custom component, even though it is available in classic dialog.
    Any suggestions on this would be highly appreciated.

    ReplyDelete
    Replies
    1. hi, yes, in the classic one - dialog/items/tab1/items/text/rtePlugins/table

      so its working for foundation text component, but not in a custom component? can you upload the component to dropbox/gdrive and share the url here?

      Delete
    2. Hi Sreekanth,
      Here is the google drive link for the component: https://drive.google.com/file/d/0ByRKv68TWVHiOTNuQkdBWGdyaGc/view?usp=sharing
      I have implemented in-place editing feature for the RTE field in the component in order to persist the content at custom property name(./bodycopytext). Will this in any way affect the way plug-ins are shown in granite/touch ui?

      Delete
    3. hi Srikanth, i dont follow, there is no clientlib with js logic to show the table summary plugin? i see all project specific code

      Delete
    4. Hi Sreekanth,
      The js with table summary plugin has been added to clientlib folder(name "touchui-libs") with categories "cq.authoring.dialog" and dependencies as "underscore". I am maintaining all the touch ui related scripts in a common folder("touchui-libs"), this is the reason for not including the js in the component.
      I can see the touchui-libs.js loading in the browser sources.
      Is the value(given above) for properties "categories" and "dependencies" appropriate?

      Thanks & Regards,
      Srikanth Pogula.

      Delete
  3. I can't get this to work with 6.2. Do you know why?

    ReplyDelete
  4. Hi Sreekanth,
    Thanks for your bunch of docs, I have some queries plz clarify.

    1) The JS you are extending "CUI.rte.ui.cui.TablePropsDialog" path is "/etc/clientlibs/granite/coralui2/optional/rte/js/components/rte/ui/dialogs/TablePropsDialog.js", for TablePropsDialog.js file categories name is "rte.coralui2" but why you given "cq.authoring.dialog" ?
    2)I have same kinda requirement like, need to add three more properties to "LinkBaseDialog.js" for links plugin. Any suggestions? Thanks in advance

    ReplyDelete