React 使用TinyMCE

1、引入

npm install --save @tinymce/tinymce-react

2.引入使用

import { Editor } from '@tinymce/tinymce-react';

<Editor
      tinymceScriptSrc='/tinymce/tinymce.min.js'
      licenseKey='gpl'
      onInit={(_evt, editor) => editorRef.current = editor}
      onBlur={(event, editor) => {
        const data = editor.getContent()
        setContent(data)
      }}
      init={{
        height: 500,
        menubar: false,
        branding: false,
        resize: false,
        toolbar_mode: 'sliding',
        language: 'zh_CN',
        font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif',
        fontsize_formats: '11px 12px 14px 16px 18px 24px 36px 48px',
        plugins: [
          'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview', 'emoticons',
          'anchor', 'searchreplace', 'visualblocks', 'fullscreen',
          'insertdatetime', 'media', 'table', 'code', 'wordcount'
        ],
        toolbar: 'fontsize bold italic forecolor backcolor | charmap anchor link fullscreen | emoticons image table | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent',
        content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
    
      }}
    />

tinymceScriptSrc是设置本地tinymce路径， licenseKey是设置自托管
如果不需要设设置本地tinymce路径和托管，删除这两个属性就可以了

tinymceScriptSrc='/tinymce/tinymce.min.js'
licenseKey='gpl'

参考文章： React 使用TinyMCE v7（免费版）_react tinymce-CSDN博客
参考文章：Hosting the TinyMCE .zip package with the React framework | TinyMCE Documentation