Question

嗨，我正在使用tinymce对此文档enter link description here

做出反应

它可以工作，但我从控制台收到此警告

enter image description here

im使用“ next”：“ ^ 8.0.1”和@ tinymce / tinymce-react”：“ ^ 3.0.1”

那为什么会这样呢？有人可以帮助我吗？谢谢

Answer 1

现在到2020年，可以在Next.js中使用动态导入。使用 ssr：false 选项。

Official Doc

Answer 2

当您使用Next.js时，通常会在初始化render方法或功能组件函数主体中应正确属于生命周期处理程序的内容时发生此问题。

如果您没有特定的原因来渲染TinyMCE，可以尝试仅在客户端进行。

尝试移动一些在componentDidMount或useEffect挂钩中初始化TinyMCE的代码（取决于您是使用带挂钩的类组件还是功能组件）。

这既可以避免SSR与浏览器不匹配的问题，又可以减轻服务器的负载。

Answer 3

使用带有@ tinymce / tinymce-react v3.8.1的nextjs v9.x.x仍然会遇到这个问题。

简单的方法是像这样向id组件添加固定的Editor道具：

<Editor id="YOUR_FIXED_ID" init={{...tiny_mce_options}} />

Answer 4

它对我有用。这是编辑器的完整代码：

<Editor
    id='FIXED_ID'
    apiKey="my-api-key"
    onInit={(evt, editor) => editorRef.current = editor}
    initialValue="<p>This is the initial content of the editor.</p>"
    init={{
        height: 500,
        menubar: false,
        plugins: [
            'advlist autolink lists link image charmap print preview anchor',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table paste code help wordcount'
        ],
        toolbar: 'undo redo | formatselect | ' +
            'bold italic backcolor | alignleft aligncenter ' +
            'alignright alignjustify | bullist numlist outdent indent | ' +
            'removeformat | help',
        content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
    }}
/>

警告：道具“ id”不匹配。在下一个js中使用tinymce

4 个答案: