React-Quill：在触发自定义工具栏按钮处理程序之前打开自定义弹出窗口答案

【问题标题】：React-Quill: Open a custom popup before firing custom toolbar button handlerReact-Quill：在触发自定义工具栏按钮处理程序之前打开自定义弹出窗口
【发布时间】：2022-07-06 20:46:46
【问题描述】：

我在我的反应应用程序中使用 react-quill。我已经设置好编辑器并准备使用。我在工具栏中添加了一个自定义按钮。该自定义按钮基本上允许用户在编辑器区域中插入“按钮”。有一个弹出组件要求用户输入按钮名称、按钮文本颜色、按钮背景颜色和按钮链接。根据这些参数，编辑器中添加了同上的按钮。

弹出组件使用状态切换：

this.state = {
    openPopup: false
}

const CustomButton = () => <>CTA</>

const CustomToolbar = () => (
    <div id="toolbar">
        <select className="ql-header" defaultValue={""} onChange={e => e.persist()}>
            <option value="1" />
            <option value="2" />
            <option selected />
        </select>
        <button className="ql-bold" />
        <button className="ql-italic" />
        <button class="ql-script" value="sub"></button>
        <button class="ql-script" value="super"></button>
        <select className="ql-color">
            <option value="red" />
            <option value="green" />
            <option value="blue" />
            <option value="orange" />
            <option value="violet" />
            <option value="#d0d1d2" />
            <option selected />
        </select>
        <button className="ql-insertCta">
            <CustomButton />
        </button>
    </div>
);

this.modules = {
            toolbar: {
                container: "#toolbar",
                handlers: {
                    insertCta: function () {
                        const cursorPosition = this.quill.getSelection().index
                        this.quill.insertEmbed(cursorPosition, 'span', 'user')
                        this.quill.setSelection(cursorPosition + 1)
                    }
                },
            },
            clipboard: {
                matchVisual: false,
            }
        };

const BlockEmbed = Quill.import('blots/block/embed');

        let ctaTool = this.generateButton()

        class CtaBlot extends BlockEmbed {
            static create(value) {
                let node = super.create(value);
                node.innerHTML = ctaTool;
                return node;
            }
        }

        CtaBlot.blotName = 'span';
        CtaBlot.tagName = 'span';
        CtaBlot.className = 'cta-button'

        Quill.register(CtaBlot);

<ReactQuill
   theme={"snow"}
   modules={this.modules}
   formats={this.formats}
   value={this.state.textEditorData}
   onChange={this.onEditorChange}
   placeholder={"Write page content here..."}
>
</ReactQuill>

insertCta 函数按预期工作。我如何打开弹出窗口，然后在弹出窗口中单击保存按钮，“insertCta”函数被触发？目前，如果直接触发，“insertCta”函数可以工作。我希望用户从弹出窗口中自定义按钮外观。

弹出： popup to configure cta

编辑： editor with custom button in toolbar

号召性用语按钮： editor when cta button is added

非常感谢任何帮助！

【问题讨论】：

标签： react-quill

【解决方案1】：

我正在寻找相同的答案。收到后请在此处发布

【讨论】：