如何在React-Quill中注册quill-placeholder-autocomplete自定义模块

我目前正在使用react-quill模块，它的表现十分出色。我的App.js代码如下：

import { useState } from  "react";
import  ReactQuill  from  "react-quill";
import  "react-quill/dist/quill.snow.css";


const  modules  = {
    toolbar: [
        [{ font: [] }],
        [{ header: [1, 2, 3, 4, 5, 6, false] }],
        ["bold", "italic", "underline", "strike"],
        [{ color: [] }, { background: [] }],
        [{ script:  "sub" }, { script:  "super" }],
        ["blockquote", "code-block"],
        [{ list:  "ordered" }, { list:  "bullet" }],
        [{ indent:  "-1" }, { indent:  "+1" }, { align: [] }],
        ["link", "image", "video"],
        ["clean"],
    ]
};

const  App  = () => {
    const [value, setValue] =  useState("");
    console.log(value);

    return  <ReactQuill  modules={modules} theme="snow" onChange={setValue} placeholder="Content goes here..." />;
};

export  default  App;

我的index.js代码如下：

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

不过，我希望集成自动补全功能对应的quill-placeholder-autocomplete模块。该模块的官方集成方式如下：

import getPlaceholderModule from 'quill-placeholder-module';
import getAutocompleteModule from 'quill-placeholder-autocomplete-module';

Quill.register('modules/placeholder', getPlaceholderModule(Quill,  {
  className: 'ql-placeholder-content',        // default
}));
Quill.register('modules/autocomplete', getAutocompleteModule(Quill));

const placeholders = [
  {id: 'foo', label: 'Foo'},
  {id: 'required', label: 'Required', required: true}
]

var quill = new Quill('#editor', {
  modules: {
    toolbar: {container: `#toolbar`},
    placeholder: {
      delimiters: ['{', '}'],                   // default
      placeholders
    },
    autocomplete: {
      getPlaceholders: () => placeholders       // factory
      container: '#completions',                // can also be return of `document.querySelector` or kept `undefined`
      triggerKey: '#',                          // default
      endKey: '#',                              // optional
      debounceTime: 0,                          // 0: disabled (default)
      onOpen: () => console.log('opened'),                                      // optional
      onClose: (placeholder) => console.log('user choosed:', placeholder),      // optional
      fetchPlaceholders: (query) => fetch(...).then(...)                        // optional
      onFetchStarted: (query) => console.log('user searching for:', query),     // optional
      onFetchFinished: (results) => console.log('possible results:', results),  // optional
    }
  },
  placeholder: 'Compose an epic...',
  theme: 'snow'
});

但我不知道如何在react-quill中实现该模块的注册与集成，希望能得到相关帮助。

要在react-quill中集成quill-placeholder-autocomplete模块，按以下步骤操作即可：

1. 安装依赖 #

先确保安装所需模块：

npm install quill-placeholder-module quill-placeholder-autocomplete-module

2. 注册Quill模块 #

在react-quill初始化前，先注册placeholder和autocomplete模块，可在App.js顶部完成：

import { useState } from "react";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
// 引入目标模块
import getPlaceholderModule from 'quill-placeholder-module';
import getAutocompleteModule from 'quill-placeholder-autocomplete-module';
// 从react-quill中获取Quill实例
const Quill = ReactQuill.Quill;

// 注册placeholder模块
Quill.register('modules/placeholder', getPlaceholderModule(Quill, {
  className: 'ql-placeholder-content', // 默认配置，可按需修改
}));
// 注册autocomplete模块
Quill.register('modules/autocomplete', getAutocompleteModule(Quill));

3. 配置modules对象 #

将placeholder和autocomplete的配置添加到现有modules对象中：

// 定义占位符数据
const placeholders = [
  {id: 'foo', label: 'Foo'},
  {id: 'required', label: 'Required', required: true}
];

const modules = {
    toolbar: [
        [{ font: [] }],
        [{ header: [1, 2, 3, 4, 5, 6, false] }],
        ["bold", "italic", "underline", "strike"],
        [{ color: [] }, { background: [] }],
        [{ script:  "sub" }, { script:  "super" }],
        ["blockquote", "code-block"],
        [{ list:  "ordered" }, { list:  "bullet" }],
        [{ indent:  "-1" }, { indent:  "+1" }, { align: [] }],
        ["link", "image", "video"],
        ["clean"],
    ],
    // 添加placeholder配置
    placeholder: {
      delimiters: ['{', '}'],
      placeholders
    },
    // 添加autocomplete配置
    autocomplete: {
      getPlaceholders: () => placeholders,
      triggerKey: '#',
      // 其他可选配置按需添加
      onClose: (placeholder) => console.log('选中的占位符:', placeholder),
    }
};

4. 自定义补全容器（可选） #

如果需要自定义自动补全的下拉容器，可在组件中添加DOM元素并绑定到配置：

import { useState, useRef, useEffect } from "react";

const App = () => {
    const [value, setValue] = useState("");
    const completionsRef = useRef(null);

    useEffect(() => {
      if (completionsRef.current) {
        modules.autocomplete.container = completionsRef.current;
      }
    }, []);

    return (
      <div>
        <ReactQuill 
          modules={modules} 
          theme="snow" 
          onChange={setValue} 
          placeholder="Content goes here..." 
        />
        {/* 自动补全下拉容器 */}
        <div ref={completionsRef} id="completions"></div>
      </div>
    );
};

5. 测试功能 #

启动应用后，输入#即可触发自动补全下拉列表，选择对应占位符即可插入编辑器。

内容的提问来源于stack exchange，提问作者tobias