How can create custom button on RTE toolbar

[Abhishekty]

Hi Team, 

I am trying to create a custom button on RTE toolbar but facing issue.

For this,  I have added a custom client lib for author instance and added my logic there, I see, my client lib load correctly and function are also trigger as expected but I am not able to create/append my custom button in rte toolbar. 

I found few old blogs which one of them for length validation, I customize that and write my logic there. 

https://sourcedcode.com/blog/aem/touch-ui/aem-richtext-max-characters-length-validation

Sample code:

(function ($, $document) {
    "use strict";
    $(document).on("dialog-ready", function () {
        var mycustombutton = `<button is="coral-button" variant="quietaction" class="rte-toolbar-item disabled _coral-ActionButton _coral-ActionButton--quiet" type="button" title="Unlink" icon="linkOff" data-action="links#unlink" tabindex="-1" size="M" aria-checked="false" role="checkbox">
        <coral-icon size="S" class="_coral-Icon--sizeS _coral-Icon" role="mycustomrole" icon="useAnyicone"></coral-icon>
        <coral-button-label class="_coral-ActionButton-label">custom button</coral-button-label></button>`
        
        //find all the RTE and append the custom button

        $('.rich-custom-dataBids').each(function () {
            //First I tried to append a button by appendButton() method 
           //  like: author.EditorFrame.editableToolbar.appendButton(editable, name, action);
            // but I am not sure how I can pass a button into appendButton() method since it have 2 parmamete 


            // var customButton = {
            //     icon: 'mycustomrole',
            //     text: 'custom button',
            //     handler: function (editable, param, target) {
            //     
            //     },
            //     condition: function (editable) {
            //         //show this button only for component type if needed
            //         return editable
            //     },
            //     isNonMulti: true
            // };
            // $document.on('cq-layer-activated', function (ev) {
            //     if (ev.layer === 'Edit') {
            //         author.EditorFrame.editableToolbar.registerAction('custom button', customButton);
            //     }
            // });


            //seems this is not right way to do this
            $(this).parent().find(".rte-toolbar")[0].append(mycustombutton);
        });

        //custom click event for custom opration
        $('.rich-custom-dataBids').click(function (e) {
            var $target = $(e.target);
            // do something
        });

    });


})($, $(document));

using append(mycustombutton) I can able to add my button but I want to register or append it in correct way. Can some suggest on this?

Thanks

Abhishek

[arunpatidar]

Hi @Abhishekty 
You can check examples for creating/adding custom plugins in RTE https://aemlab.blogspot.com/2019/07/aem-rte-custom-plugins-1.html 

[Abhishekty]

Hi @arunpatidar,

Thanks for the suggestion, nice informative article, I'm trying to use it with AEMaaCS and it's not working. Can you please explain how we are adding/registering the custom button to the toolbar?

I just want to add a custom button on the above toolbar, my other functionalities are working fine. If you can explain in your code.

Thanks

Abhishek

 

[arunpatidar · Accepted solution]

Hi @Abhishekty 
AEMaaCS RTE compatible version is - aem-rte-plugins-1.5.zip

[partyush]

Hi @Abhishekty 

Here's my take on tackling this challenge:

1. Leveraging the rte Extension Point:

The preferred way to customize the RTE toolbar in AEM 6.5+ is through the rte extension point. This provides a dedicated mechanism for extending the RTE functionality. Here's how you can use it:

• Create a custom OSGi bundle: Generate a new bundle within your project and register it to the rte extension point.
• Implement the getCustomButtons() method: Within your bundle, define this method to return an array of objects representing your custom buttons. Each object should include properties like icon, text, handler, and optionally condition (to control visibility).
• Define click handler logic: Implement the handler function to execute your desired action when the button is clicked. This could involve manipulating the RTE content, opening a dialog, etc.

2. Inspecting your Existing Approach:

Based on the provided link, it seems you're relying on a custom client-side library and logic embedded within it. While this might work to some extent, it's considered less robust and lacks the benefits of leveraging the rte extension point:

• Limited functionality: Client-side scripting only deals with the editor's UI, restricting actions like content manipulation or dialog interactions.
• Maintenance difficulties: Updates to the RTE interface might break your client-side logic, requiring adjustments.

3. Additional Tips:

• Use CQ/core.wcm components: Consider wrapping your functionality as a WCM component and referencing it in the RTE through a custom dialog. This offers a richer development experience and easier integration with the AEM platform.
• Refer to AEM documentation: Adobe provides comprehensive documentation on extending the RTE: https://experienceleague.adobe.com/docs/experience-manager-learn/cloud-service/developing/extensibil...
• Share your code details: If you're still facing issues after implementing the rte extension point, sharing your custom button definition and click handler code can help pinpoint the specific obstacle.

Thanks 

[kautuk_sahni]

@Abhishekty Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.