React Quill - HTML ID 未在编辑器内呈现的元素

Question

我在我的 React 项目中使用 React Quill (https://github.com/zenoamaro/react-quill) 作为富文本编辑器。

我运行将以下 html span 元素插入带有 ID 的编辑器时出现问题： <span id='incInsert'></span>

文本编辑器的值包含在 React 状态中，当 console.logging 状态时，我可以在其中看到 span 元素：

但是，当通过 chrome 开发工具进行检查时，span 元素不存在，因此在 DOM.

中

我需要这个元素存在于 DOM 中的原因是因为我需要使用 document.getElementById('incInsert') 将 HTML 插入 span 元素中，稍后在我的提交中完成功能。

TIA

Answer 1

我遇到了同样的问题，我是这样解决的：

import React, { useState, useRef } from "react";
import ReactQuill, { Quill } from "react-quill"; // ES6

import "react-quill/dist/quill.snow.css";

const Inline = Quill.import("blots/inline");

function MyComponent() {
  const [content, setContent] = useState("");
  const reactQuillRef = useRef(null);

  const createElementWithClassName = () => {
    class SpanBlock extends Inline {
      static create() {
        let node = super.create();
        node.setAttribute("class", "spanblock");
        node.setAttribute("id", "myId")

        return node;
      }
    }
    SpanBlock.blotName = "spanblock";
    SpanBlock.tagName = "div";
    Quill.register(SpanBlock);

    const div = document.createElement("div");
    var quill = new Quill(div);

    quill.setContents([
      {
        insert: "hello",
        attributes: {
          spanblock: true,
        },
      },
    ]);

    const result = quill.root.innerHTML;
    console.log(result);
    return result;
  };

  const buttonClick = () => {
    const quill = reactQuillRef.current.getEditor();
    const oldHtml = quill.root.innerHTML;
    const newElement = createElementWithClassName();
    const newHtml = oldHtml + newElement;

    setContent(newHtml);
  };

  return (
    <div>
      <ReactQuill
        ref={reactQuillRef}
        modules={{
          toolbar: [
            [{ font: [] }, { size: ["small", false, "large", "huge"] }], // custom dropdown

            ["bold", "italic", "underline", "strike"],

            [{ color: [] }, { background: [] }],

            [{ script: "sub" }, { script: "super" }],

            [{ header: 1 }, { header: 2 }, "blockquote", "code-block"],

            [
              { list: "ordered" },
              { list: "bullet" },
              { indent: "-1" },
              { indent: "+1" },
            ],

            [{ direction: "rtl" }, { align: [] }],

            ["link", "image", "video", "formula"],

            ["clean"],
          ],
        }}
        value={content}
        onChange={(content) => {
          setContent(content);
        }}
      />
      <button onClick={buttonClick}>click me</button>
    </div>
  );
}

export default MyComponent;

React Quill - HTML ID 未在编辑器内呈现的元素

React Quill - HTML Element with ID not Rendering Inside Editor

reactjs

quill

react-quill