地址

开始

本文采用tinymceV5版本
仅针对react的步骤

总览

注册

首先需要去官网进行账号注册，然后获取到api key(必须)，随后设置域名
域名默认仅有 localhost，发布到线上需要手动添加允许的域名

这些都添加完毕之后，即开始安装

安装

yarn add @tinymce/tinymce-react@3.14.0 -S

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

const tinyKey = 'your key'

<Editor apiKey={tinyKey} />

也支持cdn引入，本文暂不赘述

使用

这里讲一些比较重要的参数

<Editor
  apiKey={tinyKey}
  initialValue={''}
  onInit={init}
  id="Editor-Component_Container_TinyEditor"
  // inline={true}
  scriptLoading={{ async: true }} // 异步加载
  init={{
    min_height: 500,
    language: 'zh_CN',
    menubar: false, // 顶部菜单栏
    resize: false, // 右下角调整大小
    statusbar: false, // 底部状态栏
    object_resizing: false, // 禁止设置媒体大小
    images_upload_handler: imagesUploadHandler,
    content_style:
      'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
    default_link_target: '_blank',
    plugins: 'image autolink link lists', // 部分功能需要先用插件声明
    toolbar: [
      'formatselect | fontsizeselect | bold italic strikethrough forecolor backcolor |',
      'undo redo | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat | image | link |'
    ]
  }}
  onDirty={onDirty}
></Editor>

apiKey--必填，为官方账户内提供的apikey
initialValue--初始显示内容
id--编辑器id
inline--编辑器格式转换为内联
编辑器有三种展现形式：

default 默认使用iframe形式展示内容，标准模式
inline 内联模式失焦时红框内容不显示，仅显示文本框，聚焦时展示,且可以控制内部样式不像默认模式中使用iframe,操作框在document.body下，以定位形式出现

Distraction-free 清爽模式大概就是不显示栏，选中文字时出现按钮，按钮可自定义

scriptLoading--用于配置为加载TinyMCE而创建的脚本标记
提供三个配置： async-是否异步 default:false defer-是否在脚本上设置延迟标记(就是script的defer属性) default:false delay-延时加载 default:0
init--初始化时的设置内容
7.1 min_height--最小高度
7.2 language--语言包
可以根据 language_url 覆盖默认地址
7.3 menubar--顶部菜单栏 boolean string 可以控制是否显示及指定顺序

menubar: 'file edit insert view format'

7.4 resize--右下角调整大小(textarea的右下角按钮)
7.5 statusbar--底部状态栏状态栏包括元素路径、字数和编辑器大小调整
7.6 object_resizing--打开/关闭图像、表格或媒体对象上的大小调整手柄默认开启可设置boolean/img(仅打开img)
7.7 images_upload_handler--自定义图片上传函数
内置四个参数图片的各种格式，成功回调，失败回调，进度条回调(0-100)
7.8 content_style--设置基本样式，默认模式下注入到iframe的body.style中
7.9 default_link_target--toolbar中link的默认设置
7.10 plugins--插件
有些功能(菜单栏，工具栏)需要现在plugins中注册，才可以使用
插件分为官方插件和开源插件基本上够用，有很多功能
插件地址根据内容进行简单的配置即可使用
7.11 toolbar--工具栏
toolbar可能存在的功能
部分功能需要在plugins中注册，分别string和array两者格式
string为一行展示，小按钮中每一个按钮由空格间隔，每一个块由 | 进行间隔
array为多行展示，每行为一个string，格式如上依次排列即
8. 事件
事件集
8.1 onInit-初始化完成后触发一般在内部使用useRef保存编辑器实例，由于是异步，所以得等待init完成之后再进行下一步操作
8.2 onDirty-当编辑器内内容被修改后，会处于脏状态可以根据此值在save时判断是否处于脏状态是则说明编辑器内容被修改，即保存，保存成功之后调用tinyEditorRef.current.setDirty(false) 将编辑器内的状态改为正常，就可以进行下一次保存了

移动端使用
配置项总览
如果编辑器为受控组件，一般用于代码编辑器，左右视图更新，这样可能会导致性能问题，因为每一次更新都会转换一次字符串(节流)，一般由 onEditorChange 事件和 value 配合进行实时展示。
非受控组件的话，就是由 onDirty 配合进行保存以及展示

tinymce富文本编辑器(for react)

地址

开始

总览

注册

安装

使用