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

cl25kdpy 于 2023-01-11 发布在 Java

关注(0)|答案(1)|浏览(312)

我有一个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>
    )
}

JavaScript

来源：https://stackoverflow.com/questions/73419763/config-quill-text-editor-for-read-only-and-prefilled-content-react-js

1条答案

按热度按时间

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

赞(0）回复(0）举报 2023-01-11

我来回答

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

1条答案

相关问题

热门标签

最新问答