Tinymce 中的对话框（i.n 图像、链接等）不接受输入并且显示为灰色

Question

在 TinyMCE 编辑器（React 集成）中，我在模态中调用编辑器。除了任何其他图像 link 或网站 link 添加对话框没有接受输入并且显示为灰色外，一切似乎都正常 picture of greyed out editor

这是编辑器代码片段：

                    <Editor
                        apiKey="APIKEY"
                        onInit={(evt, editor) => {
                            editorRef.current = editor;
                            setLoadingEditor(1);
                        }}
                        initialValue="<p>Some initial text.</p>"
                        init={{
                            height: 440,
                            menubar: true,

                            plugins: [
                                'advlist autolink lists link image charmap print preview anchor',
                                'searchreplace visualblocks code fullscreen',
                                'insertdatetime media table paste code help wordcount',
                                'image code',
                            ],
                            toolbar:
                                'undo redo | formatselect | ' +
                                'bold italic backcolor | alignleft aligncenter ' +
                                'alignright alignjustify | bullist numlist outdent indent | ' +
                                'removeformat | image | code | help',

                            content_style:
                                'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',

                           
                        }}
                    />

编辑器在正常使用中似乎工作正常，但在我的模态组件中出现了这个问题。

编辑：我正在使用 Material UI 模态组件。

Answer 1

这很可能是您的“模态”对话框没有放弃焦点。由于在普通 HTML 中没有模态这样的东西，你选择的模态可能是 HTML 和 Javascript 的组合（例如 Bootstrap），它不想放开注意力。您将需要弄清楚如何告诉您的模态代码以允许其他东西获得控制权。

TinyMCE 文档有一个示例说明如何为 Bootstrap 执行此操作：

https://www.tiny.cloud/docs/integrations/bootstrap/#usingtinymceinabootstrapdialog

如果您使用不同的技术，您将需要确定如何做类似的事情。