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 (<><EditorinitialValue="<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博客