Nextjs 集成TinyMCE实现富文本编辑器

目录

一、导入依赖

二、动态导入

三、完整案例

四、参考文档

---

一、导入依赖

yarn add @tinymce/tinymce-react

二、动态导入

import dynamic from 'next/dynamic';

const Editor = dynamic(
    () => import('@tinymce/tinymce-react').then(mod => mod.Editor),
    {ssr: false}
);

三、完整案例

/**
 * @author Dragon Wu
 * @since 2024/6/11 14:36
 */
import React from 'react';
import dynamic from 'next/dynamic';

const Editor = dynamic(
    () => import('@tinymce/tinymce-react').then(mod => mod.Editor),
    {ssr: false}
);

const TenderEditor: React.FC = React.memo(() => {

    const handleEditorChange = (e) => {
        console.log(e)
    }

    return (<>
        <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'
            }}
            onEditorChange={handleEditorChange}
        />
    </>)
});

TenderEditor.displayName = "TenderEditor";

export default TenderEditor;

实现效果：

TinyMCE还有很多功能可以配置，详情参考官方文档：

TinyMCE 7 Documentation | TinyMCE Documentation

四、参考文档

next怎么用TinyMCE_tinymce ssr-CSDN博客