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 :)
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;
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,
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With