Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Quill toolbar is not rendering (icon paths are displayed instead of being rendered)

Tags:

reactjs

quill

I'm trying to run native Quill in React. I follow quill's quickstart but unfortunately there is a problem with toolbar rendering (see below). Icon paths are displayed instead of being rendered. Please give me same directions :)

enter image description here

Quill component:

import Quill from 'quill/core';
import Toolbar from 'quill/modules/toolbar';
import Snow from 'quill/themes/snow';
import Bold from 'quill/formats/bold';
import Italic from 'quill/formats/italic';
import React, { Component, Fragment } from 'react';
import Header from 'quill/formats/header';


Quill.register({
  'modules/toolbar': Toolbar,
  'themes/snow': Snow,
});


class MyQuill extends Component {

  constructor(props) {
    super(props);
  }


  componentDidMount(props) {
    var quill = new Quill('#editor', {
      theme: 'snow'
    });
  }

  render() {
    return (
      <div id="editor">
        <p>Hello World!</p>
        <p>Some initial <strong>bold</strong> text</p>
      </div>
    );
  }
}
export default MyQuill;
like image 785
XorOrNor Avatar asked Sep 18 '25 15:09

XorOrNor


1 Answers

Finally I was able to fix it (see below). Pity that such a great tool has so poor documentation.

Change from:

import Quill from 'quill/core';

to

import Quill from 'quill/dist/quill.js';

and from:

Quill.register({
  'themes/snow': Snow,
});

to

Quill.register({
  'themes/snow.js': Snow,
});
like image 131
XorOrNor Avatar answered Sep 21 '25 07:09

XorOrNor