0

我在我的项目中使用 Next.JS。我想将 TinyMCE 编辑器添加到我的页面。我使用了下面的代码。

<TinyMceEditor
    selector='textarea'
    initialValue={ props.value }
    apiKey=<API_KEY>
    init={{
        height: 500,
        menubar: false,
        plugins: [
            'advlist autolink lists link image', 
            'charmap print preview anchor help',
            'searchreplace visualblocks code',
            'insertdatetime media table paste wordcount'
        ],
        toolbar:
            'undo redo | formatselect | bold italic underline | \
            alignleft aligncenter alignright | \
            bullist numlist outdent indent | \
            anchor link table image media video | \
            searchreplace visualblocks code'
    }}
    onChange={(...args) => console.log(args)}
/>

对于两个不同的页面，我得到了此代码的两种不同行为。

在主页上，即localhost:3000/编辑器工作正常。我可以通过弹出模式添加图像、附加链接等。

在此处输入图像描述

但是当我去localhost:3000/admin/teams弹出模式的输入字段时，它是不可聚焦的。当我单击它时，它不会获得焦点。但同时，我可以与按钮/复选框进行交互。它只是不关注输入字段。

在此处输入图像描述

我没有得到导致此问题的原因。同样的问题也发生在 Jodit 编辑器中。我不知道它是否与 Next.JS 环境问题或路径相关问题有关。在尝试这两个编辑器后的最后几天，我认为这个问题与它们中使用的模态元素有关（也许）。

任何建议或帮助将不胜感激。谢谢你。

4

1 回答 1

0

这是 Material UI 的对话框的问题。传递disableEnforceFocus={true}给<Dialog />组件后，它得到了解决。

于 2022-02-09T14:51:29.720 回答