javascript 为只读和预填充内容配置Quill文本编辑器React.js

cl25kdpy  于 2023-01-11  发布在  Java
关注(0)|答案(1)|浏览(311)

我有一个Quill文本编辑器的基本设置。我想弄清楚Quill需要的配置是只读的,预先填充的内容,使编辑器的内容是静态的,工具栏应该被删除。
当我尝试用new quill(editor, {configs});更改配置时,编辑器消失了,只剩下一个空白屏幕。当我在另一个Web应用程序上使用完全相同的代码时,文本编辑器的工具栏被删除了,但内容没有预先填充,仍然可以编辑。
我在浏览Quill文档时迷失了方向,所以我很感激任何能让我回到正轨的想法。谢谢你的时间!

import { useCallback} from "react";
import quill from "quill";
import "quill/dist/quill.snow.css";
export default function TextEditor() { 
    const wrapperRef = useCallback(wrapper => {
        if (wrapper == null) return 
        let configs = {  theme: 'snow', readOnly: true, placeholder: 'HELLO!!!' };
        wrapper.innerHTML = ""
        const editor = document.createElement
        ("div")
        wrapper.append(editor);
        new quill(editor, {theme: "snow"});
    } , []); 
    return (
        <div>
    <div   className="container" ref={wrapperRef }/>
    </div>
    )
}
92dk7w1h

92dk7w1h1#

你可以把configs对象传递给新的quill调用,如下所示:
new Quill(editor, configs);
configs已经是一个对象,因此在将其传递给初始化器时无需将其嵌套在另一个对象中。
或者,如果使用ReactQuill组件,则可以在jsx中指定它:

import React from 'react';
import ReactQuill from 'react-quill';

function TextEditor() {
  ...
  return (
    <ReactQuill theme="bubble" readOnly="true" placeholder="HELLO!!!"/>
  );
}

根据文件:https://quilljs.com/docs/configuration/

选项

要配置Quill,请传入一个options对象:

var options = {
      debug: 'info',
      modules: {
        toolbar: '#toolbar'
      },
      placeholder: 'Compose an epic...',
      readOnly: true,
      theme: 'snow'
    };
    var editor = new Quill('#editor', options);

相关问题