Quill 编辑器未在 React 中呈现

Question

我正在 Ionic react 中开发一个应用程序。 我想要将数据保存在 firestore 上的富文本编辑器。 我已经启动了如下编辑器并在主页中添加了这个组件。 但是它虽然工作正常但它没有正确渲染。

您还可以提供/建议我更好的解决方案或其他富文本编辑器。 我想要富文本编辑器（与问题部分中的 Stackoverflow 文本编辑器完全一样）并且数据应该保存在 firestore 中。 我附上了截图和代码。

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>
    )
  }
}

Answer 1

在 reacjs 中使用标准的 quill js 代码也有同样的问题。

• 我查看了 react-quill 包，这似乎效果更好
• https://www.npmjs.com/package/react-quill

此外，您可以尝试 init quill：

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

但我一直让编辑器为空....

Answer 2

下面是 react quill 的完整代码，将图片上传到你自己的 s3 云存储中，并在 react quill 上指定 tab 和 space 问题：

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} 
/>

对于查看页面，这是代码

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

并使用此 css 解决空格和制表符问题

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