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

Question

我有一个Quill文本编辑器的基本设置。我想弄清楚Quill只使用预填充内容进行读取所需的配置，以便编辑器的内容是静态的，并且应该删除工具栏。

当我尝试用new quill(editor, {configs});更改配置时，编辑器会消失，只留下一个空白屏幕。当我在一个单独的网络应用程序上使用相同的代码时，文本编辑器的工具栏被删除了，但内容没有预先填充，仍然可以编辑。

我一直在翻阅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>
)
}

Answer 1

您可以将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，请传入一个选项对象：

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