Get font family from Quill

Question

I'm using Quill to build rich text editor. It is working fine and I can change fonts for selected words as in this example.

The next step is to export raw HTML of the edited text. I was expecting standard font-family styles to be exported but I got Quill ones.

For example, using the above link, if I select the word "hello" and change font to Mirza:

• Outputed raw HTML: <span class="ql-font-mirza">Hello </span>
• Expected raw HTML: <span style="font-family: mirza;">Hello</span>

Answer 1

It's explained in the Quill guide.

Example:

var FontStyle = Quill.import('attributors/style/font');
Quill.register(FontStyle, true);

var quill = new Quill('#editor-container', {
  modules: {
    toolbar: [
      [{ header: [1, 2, false] }],
      [{'font': []}],
      ['bold', 'italic', 'underline']      
    ]
  },
  placeholder: 'Compose an epic...',
  theme: 'snow'  // or 'bubble'
});