Search code examples
javascriptreactjstypescriptionic-frameworkquill

Quill editor not rendering in React

I am developing one application in Ionic react. I want rich text editor which will save data on firestore. I have initiated editor as below and added this component in homepage. But its not rendering correctly though its working correctly.

You can also provide/suggest me better solution or other rich text editor. I want rich text editor (exactly like Stackoverflow text editor in question part) and data should get saved in firestore. I have attached screenshot & Code.

Dashboard screenshot

QuillEditor.js

import React from 'react';

import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';

import Quill from 'quill/core';
import Toolbar from 'quill/modules/toolbar';
import Snow from 'quill/themes/snow'; //snow works, but need to import and register formats, and replace icons...

import Bold from 'quill/formats/bold';
import Italic from 'quill/formats/italic';
import Header from 'quill/formats/header';
import Underline from 'quill/formats/underline';
import Link from 'quill/formats/link';
import List, { ListItem } from 'quill/formats/list';

import Icons from 'quill/ui/icons'; 

export default class QuillEditor extends React.Component {

  componentDidMount() {

    Quill.register({
      'modules/toolbar': Toolbar,
      'themes/snow': Snow,
      'formats/bold': Bold,
      'formats/italic': Italic,
      'formats/header': Header,
      'formats/underline': Underline,
      'formats/link': Link,
      'formats/list': List,
      'formats/list/item': ListItem,
      'ui/icons': Icons
    });

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

    var quill = new Quill('#editor', {
      theme: 'snow', //this needs to come after the above, which registers Snow...
      placeholder: "Write something awesome..."
    });
  } //componentDidMount

  render() {
    return (
      <div><meta charset="utf-8" />
          <div id="QuillEditor-container">
            {/* <!-- Create the editor container --> */}
            <div id="editor">
              <p>Hello World!</p>
              <p>Some initial <strong>bold</strong> text</p>
              <p></p>
            </div>
          </div>
      </div>
    )
  }
}
Solution

  • Having the same problem just using the standard quill js code in reacjs.

    Also, you can try init quill in:

      componentDidUpdate() {
    console.log(this.editor);
    if(this.editor==null){
      console.log("Here");
      this.editor = new Quill('#editor', {
        theme: 'snow'
    });
    }
}

    But I keep getting the editor as null....