Custom button, or override the svg icons on toolbar

[RobAley]

I want to integrate Quill with an app that has existing toolbars with buttons styled with fontawsome font icons. If I use the snow theme with a custom tool bar (setting a button with a font icon with the e.g. ql-bold class), the contents are overridden with the svg icon.

Whats the best (probably easiest) approach to use buttons with my own content? I could use my own buttons with javascript handlers that, e.g. apply bold to the selected text, but then how do I detect when the cursor is in a bold section of text so that I can set an appropriate active class on my button?

Alternatively, is there a way to prevent the snow theme replacing the button content with the svg (but otherwise act as per the standard snow toolbar)?

Sorry if this is something simple, I couldn't find anything that covered this in the docs or existing issues, and I'm new to quill.

[benbro]

You can import ui/icons and override icons:

var icons = Quill.import('ui/icons');
icons['bold'] = '<i class="fa fa-bold" aria-hidden="true"></i>';

Demo:
http://codepen.io/anon/pen/NbWJGb

[RobAley]

That's great, thanks.

[KingMatrix1989]

@benbro In case that we want to add custom button to toolbar (e.g. fullscreen btn), following warning occured:
quill:toolbar ignoring attaching to nonexistent format fullscreen

[benbro]

@skmohammadi you probably need to register your custom format as well.
https://quilljs.com/playground/#class-vs-inline-style
https://quilljs.com/guides/how-to-customize-quill/#customizing-attributors

[KingMatrix1989]

@benbro the mentioned links have not helped me. How can define new format?

[benbro]

@skmohammadi please search stackoverflow for similar questions:
https://codepen.io/anon/pen/PGRQrx
https://stackoverflow.com/a/44225523

[sahalsajjad]

@benbro Thanks 👍

[1c7]

@benbro's solution work for me.
I wrote few more for my project.
here is full code (so you can copy and paste and change)

var icons = Quill.import('ui/icons');
icons['header']['2'] = '<img src="/static/editor-icon/editor-new/H.png" class="fm_editor_icon">';
icons['bold'] = '<img src="/static/editor-icon/editor-new/bold-black.png" class="fm_editor_icon">';
icons['italic'] = '<img src="/static/editor-icon/editor-new/italic.png" class="fm_editor_icon" id="fm_icon_italic">';
icons['underline'] = '<img src="/static/editor-icon/editor-new/line.png" class="fm_editor_icon">';
icons['strike'] = '<img src="/static/editor-icon/editor-new/delete.png" class="fm_editor_icon">';
icons['blockquote'] = '<img src="/static/editor-icon/editor-new/quote.png" class="fm_editor_icon">';
icons['list'] = '<img src="/static/editor-icon/editor-new/list.png" class="fm_editor_icon">';

[dudewad]

So, to be clear, is there no way to have quill just use the buttons and NOT modify them? I have a fully styled toolbar that is extremely custom, and having to override quill against our current system is both inconvenient as well as introduces complexity against future changes for our icon button system. This will introduce bugs for us down the road.
It'd be really nice to just be able to say "Quill use this button as the trigger for the link module" and call it a day... which is what I'm doing now but it overrides the inner content!

[smellyshovel]

@dudewad you can just add event listeners to your extremely custom buttons and invoke appropriate formats manually

[notbucai]

Color and background custom font ICONS are selected without updating the icon style. Is there any way to do this

[cliftonlabrum]

@dudewad Did you find a way to call an existing handler? I want to be able to programmatically call a handler.

For example, let's say I have my own function that should work exactly like "Bold" button in the toolbar. I don't have my own "bold" UI element, I just want to invoke the bold handler on the currently selected text.

Is that possible?

[izkshitiz]

If anyone is looking to use Antd icons or any icons with JSX syntax for that matter, convert the JSX syntax to html first i.e.

import ReactDOMServer from 'react-dom/server';

let italicIcon = ReactDOMServer.renderToStaticMarkup(<FileImageOutlined/>)
icons['italic'] =italicIcon;

[YagorlitskiyVyacheslav]

can i replace dropdown.svg somehow?

[fabb]

Overwriting variables in other js modules is not really a clean solution.

I found a simple solution: use the default theme instead of the snow theme.

[rohitkrishna094]

What about color or background color coz they use select tag instead of button

[Evavic44]

You can import ui/icons and override icons:

var icons = Quill.import('ui/icons');
icons['bold'] = '<i class="fa fa-bold" aria-hidden="true"></i>';

Demo: http://codepen.io/anon/pen/NbWJGb

This works but it's throwing a document is not defined error in Next.js 14 @benbro

[brijal091]

This works, but i have the issue with list option. I have ordered list and bullet option. but it's not working properly for both.
like if i am changing for the list, it's changing the icon for both. bullet and ordered.

i want to give different icons to them. how can i do it if anyone have the idea ???