Quill editor not rendering in React

user_5840231 0
Viewed 2115

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>
    )
  }
}
quill ionic-framework typescript reactjs javascript
2 Answers

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....

user_21165200

Here is the full code of react quill and upload the image in your own s3 cloud storage and specify the tab and space issue on react quill:

import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
import 'react-quill/dist/quill.bubble.css';
            
const quillContainerData = [
  ["bold", "italic", "underline", "strike", "blockquote"],
  [
    { list: "ordered" },
    { list: "bullet" },
    { indent: "-4" },
    { indent: "+4" }
  ],
  ["link", "image", "video"],
  ["clean"],
];
            
const quillFormats = [
  "header",
  "bold",
  "italic",
  "underline",
  "strike",
  "blockquote",
  "list",
  "bullet",
  "indent",
  "link",
  "image",
  "video",
];

handleChangeQuillStandart = (textQuillStandart) => {
  this.setState({ textQuillStandart });
};
    
// quill editor image upload functionality
imageHandler() {
    const input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'image/*');
    input.click();
    input.onchange = async () => {
        const file = input.files[0];
        let formData = new FormData();
        formData.append('uri', file);
        const range = this.quill.getSelection(true);
        this.quill.insertEmbed(range.index, 'image', `${window.location.origin}/images/loaders/placeholder.gif`);
        this.quill.setSelection(range.index + 1);
        //fetch api call for upload the image
        const data = await fetch(apiPath + '/api/upload'
        , {
            method: 'POST',
            headers: {
                Authorization: `Bearer ${localStorage.getItem('feathers-jwt')}`,
            },
            body: formData
        })
        const res = await data.json()
        this.quill.deleteText(range.index, 1);
        this.quill.insertEmbed(range.index, 'image', res.url);
    };
}   
     
    
<ReactQuill  theme="snow"
    className="mb-4"
    value={this.state.textQuillStandart}
    onChange={(v) => this.handleChangeQuillStandart(v)}
    modules={{
       toolbar: {
         container: quillContainerData,
         handlers: {
           image: this.imageHandler
         }
       }
    }}
    formats={quillFormats}
    preserveWhitespace={true} 
/>

For view page this is the code

<div className="task-des" dangerouslySetInnerHTML={{
    __html: handbook.introduction
}}></div>

And use this css for space and tabs issue

.task-des{
  white-space: break-spaces;
  tab-size: 4;
}
user_125093030
Related