Strategy to re-render the toolbar at runtime

[justinbkay]

Hi,

I am looking for a way to make a custom dropdown in the toolbar dynamic. I want to change the items in the select based on another select outside the editor. My thought was I could update the modules data that is bound to the editor and that might do the trick, but that doesn't seem to work. My question is, is it even possible to do, or should I try to get the select before the editor component is ever rendered e.g. have a page where the options are chosen and then route to the editor with that information.

[KillerCodeMonkey]

Never tried such a thing, but as far as I know quilljs only initializes the toolbar once.

Am 29. August 2024 17:26:25 MESZ schrieb Justin @.***>:

Hi,

I am looking for a way to make a custom dropdown in the toolbar dynamic. I want to change the items in the select based on another select outside the editor. My thought was I could update the modules data that is bound to the editor and that might do the trick, but that doesn't seem to work. My question is, is it even possible to do, or should I try to get the select before the editor component is ever rendered e.g. have a page where the options are chosen and then route to the editor with that information.

-- Reply to this email directly or view it on GitHub: https://github.com/KillerCodeMonkey/ngx-quill/issues/1928 You are receiving this because you are subscribed to this thread.

Message ID: @.***>

[justinbkay]

Thanks for responding.

I think I can get it done with a ngIf it seems to render Ok that way.

On Thu, Aug 29, 2024 at 9:44 AM Bengt Weiße @.***> wrote:

Never tried such a thing, but as far as I know quilljs only initializes the toolbar once.

Am 29. August 2024 17:26:25 MESZ schrieb Justin @.***>:

Hi,

I am looking for a way to make a custom dropdown in the toolbar dynamic. I want to change the items in the select based on another select outside the editor. My thought was I could update the modules data that is bound to the editor and that might do the trick, but that doesn't seem to work. My question is, is it even possible to do, or should I try to get the select before the editor component is ever rendered e.g. have a page where the options are chosen and then route to the editor with that information.

-- Reply to this email directly or view it on GitHub: https://github.com/KillerCodeMonkey/ngx-quill/issues/1928 You are receiving this because you are subscribed to this thread.

Message ID: @.***>

— Reply to this email directly, view it on GitHub https://github.com/KillerCodeMonkey/ngx-quill/issues/1928#issuecomment-2318189568, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAA77V3BMKKVA3UBZWTVDDZT46VPAVCNFSM6AAAAABNKVWIACVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMJYGE4DSNJWHA . You are receiving this because you authored the thread.Message ID: @.***>

-- Sites: https://www.boisemovies.com https://jbkayconstruction.com http://jbkayconstruction.com https://www.robsonoutfitters.com http://www.robsonoutfitters.com https://twitter.com/justinbkay

It always takes longer than you expect, even when you take into account Hofstadter’s Law.

• Hofstadter’s Law

[KillerCodeMonkey]

https://github.com/T-vK/DynamicQuillTools exists as an addition for quilljs v1.

Maybe you can adapt something for you for quill v2

[KillerCodeMonkey]

As long as you build that toolbar as custom HTML it may work.

But keep in mind that quilljs only understands native js and nothing angular related. So you should keep that in mind when creating your handlers/listeners

[KillerCodeMonkey]

feel free to share your solution if you have one. i will close this for now

[justinbkay]

What I ended up doing is using an ngIf that renders the editor after a "schema" variable has been selected, then I give them the option of clearing that variable which removes the editor. They can then select a different schema to show the editor with the custom dropdown elements needed. I did see another potential solution where they mapped the modules in the editor differently, but I didn't investigate that as this solution fits my use case better.