Alex-D / Trumbowyg

A lightweight and amazing WYSIWYG JavaScript editor under 10kB
https://alex-d.github.io/Trumbowyg
MIT License
3.98k stars 609 forks source link

Possible to have a Drop Down within a Drop Down #1340

Closed gvidrine closed 1 year ago

gvidrine commented 1 year ago

I'm looking for a way to have a drop down of drop downs. We wish to have two non-icon buttons, Action and Font (those words would be what would be displayed to the user).

Within those dropdowns, would be regular functions like Undo, Redo, Remove Formatting. But then, have another drop down that has the icon for 'indent' but holds an additional drop down for 'indent' and 'outdent'. (Indent plugin has been installed, the buttons work on their own)

Similarly, Font would be a drop down that would hold drop downs for Font Type to pick a font, Font Size, Font Style, Color, In Paragraph Style, etc..

Like this: trumboquestion

I have tried creating a new button definition:

indentBtnDef = { indentDrop : { dropdown: ['indent', 'outdent'], ico: 'indent' } }

Which then gets included in the btnsDef for the initialized trumbowyg (just including that part of the code and not the full definition): btnsDef: { Action: { dropdown: ['undo', 'redo', 'removeformat', 'identBtnDef'], hasIcon: false } }

But that has not worked. Undo, redo, remove format show up, but the drop down does not. I've also tried replacing identBtnDef with indentDrop and that also did not work. I've tried including the indentDrop definition right in the btnsDef but that also has not worked.

Is there a way to do this? Any help would be appreciated.

How to reproduce?

Alex-D commented 1 year ago

Hey!

I do not want to develop that, but feel free to fork or create your own UI :)