该帖主要讲的是在React本地子托管TinyMCE

安装

1.下载TinyMCE以及语言包

• • 解压文件
  • 把语言包解压的文件放入TinyMCE/langs目录下
  • 在把TinyMCE文件放入public文件目录下
    
    

2.安装依赖

npm install tinymce @tinymce/tinymce-react

编写组件

1.导入依赖

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

2.导入组件

<Editor
  tinymceScriptSrc='/tinymce/tinymce.min.js' // 本地 tinymce 路径
  licenseKey='gpl' // gpl：自托管，不使用tinymce 云
  onInit={(_evt, editor) => editorRef.current = editor} // 获得编辑器实例
  initialValue=' ' // 初始值
  init={{
    // 语言包
    language: 'zh_CN',
    language_url: '/tinymce/langs/zh_CN.js',
    // 高度
    height: 600,
    // 菜单栏
    menubar: false,
    // 插件
    plugins: [
      'advlist', // 列表插件
      'autolink', // 自动链接插件
      'lists',  // 列表插件
      'link', // 链接插件
      'image',  // 图片插件
      'charmap',  // 特殊字符插件
      'anchor', // 锚点插件
      'searchreplace', // 搜索替换插件
      'visualblocks', // 块级元素插件
      'code', // 代码插件
      'fullscreen', // 全屏插件
      'insertdatetime',  // 插入日期时间插件
      'media',  // 媒体插件
      'table', // 表格插件
      'preview',  // 预览插件
      'help',  // 帮助插件
      'wordcount', // 字数统计插件
      'quickbars',// 快捷工具栏插件
      'codesample', // 代码示例插件
      'searchreplace', // 查找替换插件
      
    ],
    selector: 'textarea',  // 选择器
    menubar: 'edit view format table tools help', // 菜单栏
    // 工具栏(第一行)
    toolbar1: 'cut copy paste selectall | fullscreen code preview | visualaid visualchars visualblocks | spellchecker  | image link media charmap template table insertdatetime | pagebreak nonbreaking anchor toc | help',
    // 工具栏(第二行)
    toolbar2: 'undo redo restoredraft | blocks | bold italic underline strikethrough superscript subscript codeformat formats codesample hr | forecolor backcolor | bullist numlist | removeformat | alignleft aligncenter alignright alignjustify | outdent indent',
    // 内容样式
    content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
    //右键菜单
    contextmenu: 'undo redo | searchreplace link pagebreak nonbreaking anchor toc | code preview fullscreen',
    // 快捷工具栏
    quickbars_insert_toolbar: false, // 禁用快捷插入
    quickbars_selection_toolbar: 'blocks | bold italic underline strikethrough | removeformat', // 快捷选择工具栏
    // 
  }} // 编辑器配置
/>
//自行配置

3.展示

未完待续……