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博客

  • 12
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值