Quill编辑器工具栏未在新窗口中初始化

Question

我已经与

react-hook-form

一起制作了一个表格，我想在2个带有React Portal的Windows中打开的编辑器中同步文本值。 我做了一个完整的工作示例

here

。如果单击输入的描述标签旁边的按钮，则将使用编辑器打开一个新窗口。我想在这两个编辑器之间同步文本值。同步文本内容正在工作，但是我有一个问题，即工具栏函数在新窗口中不起作用。渲染工具栏按钮，但不会触发任何内容，并且在新窗口中不会更改内容。它们仅在“原始”窗口中工作。

const containerRef = useRef(null);
const quill = useRef(null);

useEffect(() => {
    const container = containerRef.current;
    const editorContainer = container.appendChild(container.ownerDocument.createElement("div"));

    quill.current = new Quill(editorContainer, {
        theme: "snow",
        readOnly,
        modules: {
            history: {},
            toolbar: readOnly
                ? false
                : {
                      container: [
                          ["bold", "italic", "underline", { header: 3 }],
                          // [{ 'color': "red" }, { 'background': "yellow" }]
                      ],
                  },
            clipboard: {
                allowed: {
                    tags: ["strong", "h3", "h4", "em", "p", "br", "span", "u"],
                    // attributes: ['href', 'rel', 'target', 'class', "style"]
                    attributes: [],
                },
                customButtons: [],
                keepSelection: true,
                substituteBlockElements: true,
                magicPasteLinks: false,
                removeConsecutiveSubstitutionTags: false,
            },
        },
    });

    ref.current = quill.current;

    quill.current.on(Quill.events.TEXT_CHANGE, () => {
        console.log("on change");
        if (quill.current.getLength() <= 1) {
            onTextChange("");
        } else {
            onTextChange(quill.current.getSemanticHTML().replaceAll("<p></p>", "<p><br/></p>"));
        }
    });

    return () => {
        ref.current = null;
        quill.current = null;
        container.innerHTML = "";
    };
}, [ref]);

useEffect(() => {
    if (quill.current) {
        const currentHTML = quill.current.getSemanticHTML().replaceAll("<p></p>", "<p><br/></p>");
        const isSame = defaultValue === currentHTML;

        if (!isSame) {
            const updatedDelta = quill.current.clipboard.convert({ html: defaultValue });
            quill.current.setContents(updatedDelta, "silent");
        }
    }
}, [defaultValue]);

return (
    <div
        spellCheck={false}
        className={`ql-top-container ${readOnly ? "readonly" : ""} ${resize ? "resizable" : ""}`}
        ref={containerRef}
    ></div>
);

您的Codepan很懒惰 - >任何想帮助LL需要下载和更改Codepan的人 don`don`认为Quill是在其他窗口中工作的意图（请参阅实际Quill代码以查看实现（以克服它）或为他们打开问题）。 我建议在文档中搜索编辑器在其他窗口中工作。这是最快的方式。

y可以尝试使用代理玩法。

Answer 1