Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

How can create custom button on RTE toolbar

Avatar

Level 4

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

 

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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



Arun Patidar

View solution in original post

5 Replies

Avatar

Community Advisor

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 



Arun Patidar

Avatar

Level 4

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?

Screenshot 2024-01-26 085418.png

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

Avatar

Correct answer by
Community Advisor

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



Arun Patidar

Avatar

Community Advisor

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 

Avatar

Administrator

@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.



Kautuk Sahni