羽毛笔编辑器未在 React 中呈现

Posted 2023-03-13

【中文标题】羽毛笔编辑器未在 React 中呈现

【英文标题】：Quill editor not rendering in React

【发布时间】：2020-12-30 19:26:30

【问题描述】：

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

您还可以提供/建议我更好的解决方案或其他富文本编辑器。我想要富文本编辑器（就像问题部分的 *** 文本编辑器一样）并且数据应该保存在 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>
    )
  

【问题讨论】：

尝试在编辑器的锚容器中创建一个ref，然后在componentDidMount 中渲染

【参考方案1】：

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

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

另外，您可以尝试 init quill in：

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

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

【参考方案2】：

这里是 react quill 的完整代码，并将图片上传到你自己的 s3 云存储中，并在 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 
/>

查看页面这是代码

<div className="task-des" dangerouslySetInnerhtml=
    __html: handbook.introduction
></div>

并将此 css 用于空格和制表符问题

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