React-quill: Ability to change icons on default toolbar

[aliciawood]

I have been trying relentlessly to change the icons for the toolbar while retaining all the default behaviors. I would like to be able put another custom component (or icon tag) within the button to be able to change the style of the buttons while still retaining the same functionality. And while maintaining the overall style of all the other parts of the toolbar (i.e. not removing all the styling)

Thanks.

Quill version:

• [ ] master
• [ ] 0.4.1
• [ ] 1.0.0-beta-1
• [ ] 1.0.0-beta-2
• [ ] 1.0.0-beta-3
• [ ] 1.0.0-beta-4
• [ ] 1.0.0-beta-5
• [X ] 1.0.0-rc-1
• [ ] Other (fork)

[alexkrolick]

Hi,

The toolbar transformation is actually not handled by ReactQuill - in fact it lives in a bit of a gray area because the JSX elements are turned into DOM elements and then manipulated by Quill's Javascript.

In any case, there are some ways to get this to work without changing the Quill editor.

I dug into the Quill toolbar code and found this snippet:

[].forEach.call(this.container.querySelectorAll('button, select'), (input) => {
  this.attach(input);
});

So any custom toolbar buttons need to conform to the <button className="ql-..." /> format.

This seems to work to get the basic buttons going with octicon or fa (FontAwesome) CSS, and only the core Quill CSS included:

.ql-toolbar button.octicon, .ql-toolbar button.fa {
  border: none;
  background: none;
  width: 1.5em;
  color: #444;
}

.ql-toolbar button.ql-active {
  color: #06c;
}

<button className="ql-bold fa fa-bold" />
<button className="ql-bold octicon octicon-bold" />

Demo: http://codepen.io/alexkrolick/pen/PmwpPE?editors=0010

Another approach is to override the SVG backgrounds of the Snow theme with some other images.

[alexkrolick]

Here's another way from https://github.com/quilljs/quill/issues/1099#issuecomment-258560326

You can replace specific icons with alternate DOM strings:

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

Seems to work http://codepen.io/alexkrolick/pen/MmYprg?editors=0010

[markpradhan]

You can get the quill instance and do: this.quill.format('bold', true)

//..
componentDidMount() {
    this.quillInstance = this.reactQuillRef.getEditor()
  }
//..
<ReactQuill ref={el => (this.reactQuillRef = el)} />
//..
// get current format
function isFormatApplied(format) {
  const quill = this.quillInstance
  const currentFormat = quill.getFormat(quill.getSelection(true))

  return get(currentFormat, format) // lodash get
}

// toggle format
function toggleFormat(format) {
  this.quillInstance.format(format, !isFormatApplied.call(this, format))
}

// your own logic..
// eg.
toggleFormat.call(this, 'bold')

[ycjcl868]

@alexkrolick It can't render React Component , only pure html

[alexkrolick]

Correct, that's expected

[martisj]

There is a way 😄 @ycjcl868
Probably not optimal, no idea.

import ReactDOMServer from 'react-dom/server';
const icons = Quill.import('ui/icons');
icons['bold'] = ReactDOMServer.renderToString(<FormatBoldIcon />);

This at least works for me 👍

[graphman65]

There is actually a simple way that doesn't require ReactDOMServer.

const icons = Quill.import('ui/icons');
icons.bold = null; // or `delete icons.bold`

Then, you can simply use custom react component in the toolbar:

<div id="toolbar">
  <button className="ql-bold"><MyCustomComponent /></button>
</div>

Hope this can help.

[abhibhonsle234]

There is actually a simple way that doesn't require ReactDOMServer.

const icons = Quill.import('ui/icons');
icons.bold = null; // or `delete icons.bold`

Then, you can simply use custom react component in the toolbar:

<div id="toolbar">
  <button className="ql-bold"><MyCustomComponent /></button>
</div>

Hope this can help.

How to apply this for ql-background as it uses a select tag, not a button tag. I tried similar syntax but the icon did not show up.