CODEWITHSUNDEEP
editorhidetoolbarshowquill
Ananth Ganapathy
Ananth Ganapathy

Reputation: 41

Dynamically change Quill toolbar visibility

I know that on instantiation of a Quill editor, there is a toolbar visibility option. Is there a way that I can change this toolbar visibility dynamically after the editor is instantiated?

options = {
            debug: 'info',
            placeholder: "Place your content here",
            readOnly: false,
            theme: 'snow',
            modules: {
                toolbar: toolbarOptions --> i want to change this property as false at runtime
            },
    };

Upvotes: 4

Views: 4714

Answers (4)

Aldo U.
Aldo U.

Reputation: 1

You can access the class list of the toolbar with this js:

quill.getModule('toolbar').container.classList

So you can add or remove a class to hide the toolbar.

quill.getModule('toolbar').container.classList.add('hidden');

quill.getModule('toolbar').container.classList.remove('hidden');

Upvotes: 0

Shimrit Snapir
Shimrit Snapir

Reputation: 463

you can access the tooltip hide/show function like this: quill.theme.tooltip.hide() or quill.theme.tooltip.show()

Upvotes: 0

Florent Giraud
Florent Giraud

Reputation: 225

Hello you can use display: none/block too it's working. It will create or delete the element. Show/hide is a bit different i let you find why.

Upvotes: 0

jhchen
jhchen

Reputation: 14767

To clarify the option is not just visibility, it's whether to create a toolbar at all or not. A toolbar cannot be added or removed after the editor is initialized. If you just want to control visibility, one option is just to use CSS to show/hide the toolbar.

Upvotes: 3

Related Questions