[AEM][Universal Editor] Extend wysiwyg | Community
Skip to main content
J
jacintoca2
New Participant
January 14, 2025
Investigating

[AEM][Universal Editor] Extend wysiwyg

  • January 14, 2025
  • 3 replies
  • 478 views
Request for Feature Enhancement (RFE) Summary: Allow customize wywisyg inline and richtext. At the moment is limited the wysiwyg and only allow some actions instead to use the full power of the wysiwyg.
Use-case:  
Current/Experienced Behavior:  
Improved/Expected Behavior: With universal editor at the moment is imposible to customize or extend buttons for wysiwyg inline and richtext component. Should be fantastic to have configuration to allow hide/add new buttons in the wysywig. One simple thing as a color picker.
Environment Details (AEM version/service pack, any other specifics if applicable):  
Customer-name/Organization name: Santander
Screenshot (if applicable):  
Code package (if applicable):  

3 replies

kautuk_sahni
kautuk_sahni
Employee
February 14, 2025

@jacintoca2 

Thanks for proposing this idea.
This has been reported to the engineering under the internal reference SITES-29246. The product team will triage this request to verify feasibility based on the prioritization model. This post will be updated according to Jira's status.
Kautuk Sahni
J
jacintoca2Author
New Participant
January 20, 2025

This solutions doesn't work with universal editor/new editor Content Fragment. Skip the confirmation from cq:editorConfig and only use custom config from univeraleditor JS

AmitVishwakarma
AmitVishwakarma
New Participant
January 19, 2025

To extend the WYSIWYG editor in AEM (Universal Editor) and add buttons like a color picker:

Modify WYSIWYG Configuration: Update the cq:editorConfig to include custom toolbar buttons and plugins (e.g., ColorPicker).
Custom Javascript: Add custom JavaScript for additional features (like custom button actions).
Update Universal Editor: Ensure changes are reflected in the Universal Editor settings.
Test: Validate the extended functionality works as expected.

Example configuration for color picker:

{
"toolbar": [
["Bold", "Italic", "-", "ColorPicker"]
],
"plugins": [
"ColorPicker"
]
}

This will allow you to customize the editor's functionality.

Terms & ConditionsAccessibility statement

Loading footer...