custom rte plugin with three features with custom icons to feature and plugin

[AliSyed1]

Hello guys . I am creating custom rte plugin . I searched for proper documentation but I could not get it. I somehow managed to create new plugin AI.

Now I want to show it in inplace , dialog , fullscreen editing along with the ootb plugins but unfortunately I has to mention it all in my xml.

1.Is there a way to show my custom plugin along with ootb plugins without listing them all in my xml?

2.How to add custom icons to plugin and features? tbGenerator.registerIcon(id,iconname) what this function takes as parameters? 

3.how to show features when i click on the plugin just like format shows bold , italic , underline when i click on it?

you can take a look at my code below.

function addPluginToDefaultUISettings(){

    console.log("reached function");

    var groupFeature = "ai#summary",

        toolbar = CUI.rte.ui.cui.DEFAULT_UI_SETTINGS.dialogFullScreen.toolbar;

    if(toolbar.includes(groupFeature)){

        return;

    }

    toolbar.splice(0, 0, groupFeature);

    CUI.rte.ui.cui.DEFAULT_UI_SETTINGS.dialogFullScreen.toolbar = toolbar;

}

(function (Granite, CUI) {

    'use strict';

    // Define the AI Plugin

    CUI.rte.plugins.AIPlugin = new Class({

        // Extend the RTE Plugin

        toString: "AIPlugin",

        extend: CUI.rte.plugins.Plugin,

        // Features provided by this plugin

        getFeatures: function () {

            return ["summary"];

        },

        // Initialization logic

        initializeUI: function (tbGenerator) {

            // Add Generate Text button if the feature is enabled

                this.summaryUI = tbGenerator.createElement('summary', this, false, {

                    'title': Granite.I18n.get('summary')

                });

                console.log("summaryUI is " ,this.summaryUI)

                tbGenerator.addElement('ai', CUI.rte.plugins.Plugin.SORT_FORMAT, this.completionsUI, 10);

                console.log(tbGenerator.registerIcon('ai#summary', 'colorPalette'));

                console.log("tbGenerator is " ,tbGenerator)

                // addPluginToDefaultUISettings();

        },

        // Execute the commands for the features

        execute: function (command, value, env) {

            if (command === "summary") {

                // Implement the summary generation logic here

                console.log('Generating summary...');

                // You can implement your AI summarization logic here

            }

        }

    });

    CUI.rte.commands.AICommand = new Class({

        extend: CUI.rte.commands.Command,

        toString: 'AICommand',

        isCommand: function (cmdStr) {

            return (cmdStr === 'aiCommand');

        },

        getProcessingOptions: function () {

            var cmd = CUI.rte.commands.Command;

            return ;

        },

        execute: function (execDef) {

            // add implementation

        },

     });

     // register command with CommandRegistry

     CUI.rte.commands.CommandRegistry.register('aiCommand', CUI.rte.commands.AICommand);

    // Register the AI Plugin

    CUI.rte.plugins.PluginRegistry.register("ai", CUI.rte.plugins.AIPlugin);

})(Granite, CUI);

(function (Granite, CUI) {

    'use strict';

    // Define the AI Plugin

    CUI.rte.plugins.AIPlugin = new Class({

        // Extend the RTE Plugin

        toString: "AIPlugin",

        extend: CUI.rte.plugins.Plugin,

        // Features provided by this plugin

        getFeatures: function () {

            return ["summary","air"];

        },

        initializeUI: function (tbGenerator) {

                this.summaryUI = tbGenerator.createElement('summary', this, false, {

                    'title': Granite.I18n.get('summary')

                });

                console.log("summaryUI is " ,this.summaryUI)

                tbGenerator.addElement('summary', CUI.rte.plugins.Plugin.SORT_FORMAT, this.summaryUI, 100);

                tbGenerator.registerIcon('ai#summary', 'colorPalette');

                console.log("tbGenerator is " ,tbGenerator)

                this.aiUI = tbGenerator.createElement('air', this, false, {

                    'title': Granite.I18n.get('air')

                });

                console.log("aiUI is " ,this.aiUI)

                tbGenerator.addElement('air', CUI.rte.plugins.Plugin.SORT_FORMAT, this.aiUI, 100);

                tbGenerator.registerIcon('ai#air','colorPalette')

        },

        execute: function (command, value, env) {

            if (command === "summary") {

                console.log('Generating summary...');            }

        }

    });

    // Register the AI Plugin

    CUI.rte.plugins.PluginRegistry.register("ai", CUI.rte.plugins.AIPlugin);

})(Granite, CUI);

// CUI.rte.commands.AICommand = new Class({

//     extend: CUI.rte.commands.Command,

//     toString: 'AICommand',

//     isCommand: function (cmdStr) {

//         return (cmdStr === 'aiCommand');

//     },

//     getProcessingOptions: function () {

//         var cmd = CUI.rte.commands.Command;

//         return ;

//     },

//     execute: function (execDef) {

//         // add implementation

//     },

//  });

//  // register command with CommandRegistry

//  CUI.rte.commands.CommandRegistry.register('aiCommand', CUI.rte.commands.AICommand);

I gone through all blogs and even asked chatgpt. If possible give detailed answer.

Thank you,

Alisyed

[arunpatidar · Accepted solution]

Hi @AliSyed1 

Please check 

https://experience-aem.blogspot.com/2023/10/aem-cloud-service-text-component-firefly-rte-plugin-gene...

https://aemlab.blogspot.com/2019/07/aem-rte-custom-plugins-1.html 

https://experience-aem.blogspot.com/2020/05/aem-6540-core-components-280-touch-ui-rte-rich-text-edit... 

[AliSyed1]

Hai @arunpatidar  , I don't know why I am not able to find solution to my problem after readng so many blogs. I simply want to add custom icon to my newly implemented plugin and featuers.please can you give quick solution.

[arunpatidar]

Hi @AliSyed1 

There are no documentation available for RTE , so you need to rely on different blogs to implemented custom RTE plugins

I have shared few and here are more:

https://www.bounteous.com/insights/2022/01/06/custom-rich-text-editor-plugins-adobe-experience-manag... 

https://exadel.com/news/creating-a-custom-aem-rte-plugin/ 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-create-a-custom-rte... 

[MukeshYadav_]

Hi @AliSyed1 ,

1.Is there a way to show my custom plugin along with ootb plugins without listing them all in my xml?

No, as adding the groupFeature in inline and dialogFullScreen node add the plugin in toolbar and binds all the methods.

So simply overlay the component and add it to the dialog.

2.How to add custom icons to plugin and features? tbGenerator.registerIcon(id,iconname) what this function takes as parameters? 

tbGenerator.registerIcon(id,iconname)

takes id and coral icon name , coral icon are listed https://developer.adobe.com/experience-manager/reference-materials/6-4/coral-ui/coralui3/Coral.Icon....

examples

var groupFeature = GROUP + "#" + COLOR_PICKER_FEATURE;
tbGenerator.registerIcon(groupFeature, "textColor");

where  Group and feature are string.

var GROUP = "custom-rte-color-picker",
    COLOR_PICKER_FEATURE = "colorPicker"

3. You can write logic as per your requirement you may take reference by installing below package(which is just a custom color picker to apply color on text)

https://drive.google.com/file/d/17u-qMp1EbcDrCkIswtvql_tRKxB0EOW2/view?usp=sharing

After installing the package, add the feature in rteplugin node and inline node as mentioned here https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-customize-paraforma...

sample cq:dialog.xml for text v2

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
          xmlns:granite="http://www.adobe.com/jcr/granite/1.0"
          xmlns:cq="http://www.day.com/jcr/cq/1.0"
          xmlns:jcr="http://www.jcp.org/jcr/1.0"
          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
          jcr:primaryType="nt:unstructured"
          jcr:title="Text"
          sling:resourceType="cq/gui/components/authoring/dialog"
          helpPath="https://www.adobe.com/go/aem_cmp_text_v2"
          trackingFeature="core-components:text:v2">
    <content jcr:primaryType="nt:unstructured"
             sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <tabs jcr:primaryType="nt:unstructured"
                  sling:resourceType="granite/ui/components/coral/foundation/tabs"
                  maximized="{Boolean}true">
                <items jcr:primaryType="nt:unstructured">
                    <properties jcr:primaryType="nt:unstructured"
                                jcr:title="Properties"
                                sling:resourceType="granite/ui/components/coral/foundation/container"
                                margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <columns jcr:primaryType="nt:unstructured"
                                     sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                                     margin="{Boolean}true">
                                <items jcr:primaryType="nt:unstructured">
                                    <column granite:class="cq-RichText-FixedColumn-column"
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/container">
                                        <items jcr:primaryType="nt:unstructured">
                                            <text jcr:primaryType="nt:unstructured"
                                                  sling:resourceType="cq/gui/components/authoring/dialog/richtext"
                                                  name="./text"
                                                  useFixedInlineToolbar="{Boolean}true">

                                                <rtePlugins jcr:primaryType="nt:unstructured">
                                                    <format jcr:primaryType="nt:unstructured" features="bold,italic"/>
                                                    <justify jcr:primaryType="nt:unstructured" features="-"/>
                                                    <links jcr:primaryType="nt:unstructured"
                                                           features="modifylink,unlink"/>
                                                    <lists jcr:primaryType="nt:unstructured" features="*"/>
                                                    <misctools jcr:primaryType="nt:unstructured"
                                                               features="*">
                                                        <specialCharsConfig jcr:primaryType="nt:unstructured">
                                                            <chars jcr:primaryType="nt:unstructured">
                                                                <default_copyright
                                                                        jcr:primaryType="nt:unstructured"
                                                                        entity="&amp;copy;"
                                                                        name="copyright"/>
                                                                <default_euro
                                                                        jcr:primaryType="nt:unstructured"
                                                                        entity="&amp;euro;"
                                                                        name="euro"/>
                                                                <default_registered
                                                                        jcr:primaryType="nt:unstructured"
                                                                        entity="&amp;reg;"
                                                                        name="registered"/>
                                                                <default_trademark
                                                                        jcr:primaryType="nt:unstructured"
                                                                        entity="&amp;trade;"
                                                                        name="trademark"/>
                                                            </chars>
                                                        </specialCharsConfig>
                                                    </misctools>
                                                    <paraformat jcr:primaryType="nt:unstructured" features="*">
                                                        <formats jcr:primaryType="nt:unstructured">
                                                            <default_p
                                                                    jcr:primaryType="nt:unstructured"
                                                                    description="Paragraph"
                                                                    tag="p"/>
                                                            <default_h1
                                                                    jcr:primaryType="nt:unstructured"
                                                                    description="Heading 1"
                                                                    tag="h1"/>
                                                            <default_h2
                                                                    jcr:primaryType="nt:unstructured"
                                                                    description="Heading 2"
                                                                    tag="h2"/>
                                                            <default_h3
                                                                    jcr:primaryType="nt:unstructured"
                                                                    description="Heading 3"
                                                                    tag="h3"/>
                                                            <default_h4
                                                                    jcr:primaryType="nt:unstructured"
                                                                    description="Heading 4"
                                                                    tag="h4"/>
                                                            <default_h5
                                                                    jcr:primaryType="nt:unstructured"
                                                                    description="Heading 5"
                                                                    tag="h5"/>
                                                            <default_h6
                                                                    jcr:primaryType="nt:unstructured"
                                                                    description="Heading 6"
                                                                    tag="h6"/>
                                                            <default_blockquote
                                                                    jcr:primaryType="nt:unstructured"
                                                                    description="Quote"
                                                                    tag="blockquote"/>
                                                            <default_pre
                                                                    jcr:primaryType="nt:unstructured"
                                                                    description="Preformatted"
                                                                    tag="pre"/>
                                                        </formats>
                                                    </paraformat>
                                                    <table jcr:primaryType="nt:unstructured" features="*"/>
                                                    <tracklinks jcr:primaryType="nt:unstructured" features="*"/>
                                                    <image
                                                            jcr:primaryType="nt:unstructured"
                                                            features="*"/>
                                                    <table
                                                            jcr:primaryType="nt:unstructured"
                                                            features="*"/>
                                                    <edit
                                                            jcr:primaryType="nt:unstructured"
                                                            defaultPasteMode="wordhtml"
                                                            features="[paste-wordhtml]"/>
                                                    <custom-rte-color-picker jcr:primaryType="nt:unstructured" features="*"/>
                                                </rtePlugins>
                                                <uiSettings jcr:primaryType="nt:unstructured">
                                                    <cui jcr:primaryType="nt:unstructured">
                                                        <inline jcr:primaryType="nt:unstructured"
                                                                toolbar="[format#bold,format#italic,format#underline,#justify,#lists,links#modifylink,links#unlink,#paraformat,image#imageProps,table#createoredit,edit#paste-wordhtml,misctools#sourceedit,custom-rte-color-picker#colorPicker]">
                                                            <popovers jcr:primaryType="nt:unstructured">
                                                                <justify jcr:primaryType="nt:unstructured"
                                                                         items="[justify#justifyleft,justify#justifycenter,justify#justifyright,justify#justifyjustify]"
                                                                         ref="justify"/>
                                                                <lists jcr:primaryType="nt:unstructured"
                                                                       items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"
                                                                       ref="lists"/>
                                                                <paraformat jcr:primaryType="nt:unstructured"
                                                                            items="paraformat:getFormats:paraformat-pulldown"
                                                                            ref="paraformat"/>
                                                            </popovers>
                                                        </inline>
                                                        <tableEditOptions jcr:primaryType="nt:unstructured"
                                                                          toolbar="[table#insertcolumn-before,table#insertcolumn-after,table#removecolumn,-,table#insertrow-before,table#insertrow-after,table#removerow,-,table#mergecells-right,table#mergecells-down,table#mergecells,table#splitcell-horizontal,table#splitcell-vertical,-,table#selectrow,table#selectcolumn,-,table#ensureparagraph,-,table#modifytableandcell,table#removetable,-,undo#undo,undo#redo,-,table#exitTableEditing,-]"/>
                                                        <dialogFullScreen
                                                                jcr:primaryType="nt:unstructured"
                                                                toolbar="[format#bold,format#italic,edit#paste-wordhtml,links#modifylink,links#unlink,lists#unordered,lists#ordered,lists#outdent,lists#indent,#justify,table#createoredit,image#imageProps,misctools#specialchars,misctools#sourceedit,#paraformat,custom-rte-color-picker#colorPicker]">
                                                            <popovers jcr:primaryType="nt:unstructured">
                                                                <justify
                                                                        jcr:primaryType="nt:unstructured"
                                                                        items="[justify#justifyleft,justify#justifycenter,justify#justifyright,justify#justifyjustify]"
                                                                        ref="justify"/>
                                                                <paraformat
                                                                        jcr:primaryType="nt:unstructured"
                                                                        items="paraformat:getFormats:paraformat-pulldown"
                                                                        ref="paraformat"/>
                                                                <lists jcr:primaryType="nt:unstructured"
                                                                       items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"
                                                                       ref="lists"/>
                                                            </popovers>
                                                        </dialogFullScreen>
                                                    </cui>
                                                </uiSettings>
                                                <htmlRules jcr:primaryType="nt:unstructured">
                                                    <links
                                                            jcr:primaryType="nt:unstructured"
                                                            protocols="[https://,ftp://,mailto:,tel:,callto:]" />
                                                </htmlRules>
                                            </text>
                                            <id jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                fieldDescription="HTML ID attribute to apply to the component."
                                                fieldLabel="ID"
                                                name="./id"/>
                                        </items>
                                    </column>
                                </items>
                            </columns>
                        </items>
                    </properties>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

PFA

Thanks

[kautuk_sahni]

@AliSyed1 Did you find the suggestions helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!