How to create a custom RTE plugin just like paragraph formats

[khaSHA]

I would like to create a custom RTE plugin just like paragraph formats (it will have the dropdown) we see in the RTE where upon clicking of a particular text in that custom plugin I would like to print it to the console. And for that custom plugin also I would like to set an icon.

Just like this I would like to implement. 

Thank you.

[EstebanBustamante]

Hi,

Please refer to these articles where there is a good detail explanation about how to add a custom plugin for an RTE:

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

https://medium.com/globant/build-a-custom-rte-plugin-with-chatgpt-for-aem-4e373487a6fe 

Hope this helps

[khaSHA]

@EstebanBustamante 

I am getting this error.

So I am registering the plugin like this /libs/clientlibs/granite/richtext/core/js/plugins/ParagraphFormatPlugin.js and even in the paraformat in uisettings i kept the items just like it is there but instead of paraformat i changed to my own 'translate' which I have written.

[EstebanBustamante]

Are you following the examples I shared? There's a downloadable package available for you to customize. It seems the error you're encountering stems from improper registration of certain JavaScript components. Based on the examples I provided, make sure to register your plugin under the category 'rte.coralui3'. Kindly verify this and make use of the resources I shared.

[thimmaraju111]

// Helper function to check if the device is mobile
const isMobile = () => window.innerWidth <= 1087;

// Select elements
const searchBox = document.querySelector('.navigation-search_search-box'); // Search div
const toggleMenu = document.querySelector('.uc-icon-action-menu'); // Menu icon
const closeMenu = document.querySelector('.uc-icon-action-close'); // Close icon
const menuWrapper = document.querySelector('.menu-wrapper'); // Wrapper for menu
const isVisibleClass = 'is-visible'; // Class to toggle visibility

// Ensure elements exist
if (isMobile() && searchBox && toggleMenu && closeMenu) {
// Initially hide the search box
searchBox.style.display = 'none';

// Ensure the toggleMenu doesn't re-register the event listener
if (!toggleMenu.hasAttribute('data-click-registered')) {
toggleMenu.setAttribute('data-click-registered', 'true');

// Add event listener for the menu toggle button
toggleMenu.addEventListener('click', function (e) {
const target = e.target;

if (target.classList.contains('uc-icon-action-menu')) {
// Show the search box and close icon
searchBox.style.display = 'block';
toggleMenu.classList.add('hide-icon'); // Hide the menu icon
closeMenu.classList.remove('hide-icon'); // Show the close icon
} else if (target.classList.contains('uc-icon-action-close')) {
// Hide the search box and close icon
searchBox.style.display = 'none';
toggleMenu.classList.remove('hide-icon'); // Show the menu icon
closeMenu.classList.add('hide-icon'); // Hide the close icon
}

// Toggle visibility for the menu wrapper
menuWrapper.classList.toggle(isVisibleClass);

// If menu wrapper is not visible, remove additional classes
if (!menuWrapper.classList.contains(isVisibleClass)) {
Array.from(menuWrapper.querySelectorAll('a')).forEach((menuLink) =>
menuLink.classList.remove('is-active')
);
}
});
}
}

[kautuk_sahni]

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

[thimmaraju111]

// Select all accordion buttons
const accordionButtons = document.querySelectorAll('.us-accordion--button');

accordionButtons.forEach((button) => {
button.addEventListener('click', () => {
const isExpanded = button.getAttribute('aria-expanded') === 'true'; // Check current aria-expanded state

// Find the corresponding content element
const parent = button.closest('.uc-accordion-item'); // Locate the parent accordion item
const content = parent.querySelector('.uc-accordion-item__content'); // Find the content within the same parent

// Toggle aria-expanded state
button.setAttribute('aria-expanded', !isExpanded);

// Add or remove the hidden attribute based on aria-expanded
if (isExpanded) {
content.setAttribute('hidden', ''); // Collapse the content
} else {
content.removeAttribute('hidden'); // Expand the content
}
});
});

// Initial setup: Add hidden attribute for all content elements where aria-expanded is false
accordionButtons.forEach((button) => {
const parent = button.closest('.uc-accordion-item'); // Locate the parent accordion item
const content = parent.querySelector('.uc-accordion-item__content'); // Find the content within the same parent

if (content && button.getAttribute('aria-expanded') === 'false') {
content.setAttribute('hidden', ''); // Ensure hidden is applied initially
}
});