# MRichText 富文本

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/mobile/rich-text/freepass)
- 平台：移动端
- 维护者：陈佳敏
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[MRichText]

## 代码演示

### 基础模式 （详细demo见pc的RichText组件）

```jsx
import React from "react";
import { MRichText, Switch } from "@weapp/ui";
import { appInfo } from '@weapp/utils';
const root = appInfo('@weapp/ui').publicUrl;

const extraPlugins = [
  // 撤销回退
  'undo',
  // 图片
  'image2',
  'uploadimage',
  // 编辑视频
  'html5video',
  // 扩展插件 (结合extendsConfig使用)
  'customExtend',
];

const toolbar = [[
  "Undo", // 撤销
  "Redo", // 回退
  "-",
  "Format", // 格式
  "Font", // 字体
  "FontSize", // 字号
  "TextColor", // 颜色
  "BGColor", // 背景色
  "FillColor", // 填充色
  "Bold", // 加粗
  "Italic", // 斜体
  "-",
  "CustomExtendBtn", // 自定义的按钮 - 用来和extraPlugins进行绑定使用 （和extendsConfig扩展配置一一对应,toolbar中的位置绝对最终渲染的位置）
  "CustomExtendBtn",
  "CustomExtendBtn",
  "CustomExtendBtn",
]];

class Demo extends React.Component<{ weId?: string }> {
  editor: any;

  componentWillUnmount() {
    this.editor = null; // 防止内存泄漏
  }

  richTextRef: any = React.createRef();
  uploadParams = { module: 'document' }; // 上传鉴权参数，仅供参考
  uploadPreviewParams = { // 预览鉴权参数，仅供参考
    module: 'document',
  };
  ckConfig = this.createCkConfig();
  extendsConfig = this.createExtendsConfig();

  state = {
    value: `<p>默认值测试：<a href="${root}/ui/demo/images/777b73d366c0fa24.jpg" target="_blank">这是一个超链接</a><img src="${root}/ui/demo/images/777b73d366c0fa24.jpg" /></p>`,
    readOnly: false,
    disabled: false
  }

  private createCkConfig() {
    return {
      height: 500,
      extraPlugins,
      toolbar,
      uploadUrl: '/api/file/module/upload',
    };
  }

  private createExtendsConfig() {
    return [
      {
        name: 'imageUpload',
        title: '插入图片(直接上传)',
        comProps: {
          uploadProps: { // 上传组件属性
            uploadParams: this.uploadParams,
          },
        },
      },
      {
        name: 'videoUpload',
        title: '上传视频',
        comProps: {
          uploadProps: { // 上传组件属性
            uploadParams: this.uploadParams,
          },
        },
      }
    ];
  }

  onReady = (editor: any, store: any) => {
    // onReady: 做当前组件的editor绑定
    console.log('onReady', editor, store);
    this.editor = editor;
  }

  onChange = (data: string, editor: any) => {
    this.setState({ value: data });
    console.log('onChange', { data, editor });
  }

  onBlur = (data: string, editor: any) => {
    console.log('onBlur', { data, editor });
  }

  onFocus = (data: string, editor: any) => {
    console.log('onFocus', { data, editor });
  }

  onReadOnlyChange = () => {
    this.setState({ readOnly: !this.state.readOnly, disabled: false });
  }

  onDisableChange = () => {
    this.setState({
      readOnly: false
    }, () => {
      const timer = setTimeout(() => {
        this.setState({ disabled: !this.state.disabled });
        clearTimeout(timer);
      }, 100);
    });
  }

  render() {
    const { readOnly, disabled } = this.state;
    const ckConfig = this.ckConfig;
    const extendsConfig = this.extendsConfig;

    return (
      <>
        <p>
          <Switch value={readOnly} onChange={this.onReadOnlyChange} />&nbsp;点击切换只读效果
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <Switch value={disabled} onChange={this.onDisableChange} />&nbsp;点击切换禁用效果
        </p>
        <MRichText
          ref={this.richTextRef}
          id="richtext_demo_simple" // 注意: id必填，并且唯一
          value={this.state.value}
          ckConfig={ckConfig}
          extendsConfig={extendsConfig}
          uploadParams={this.uploadParams} // 给到Upload组件的uploadParams参数，供上传组件使用
          uploadPreviewParams={this.uploadPreviewParams}
          readOnly={readOnly}
          disabled={disabled}
          isRouteLayout={false} // 是否路由切页
          showVoiceToTextBtn // 是否显示语音转文字按钮
          // isScrollToolbar={false} // 工具栏是否为超长滚动（默认为true, 配置false显示为折行效果）
          onReady={this.onReady}
          onChange={this.onChange}
          onBlur={this.onBlur}
          onFocus={this.onFocus}
        />
      </>
    );
  }
}

export default Demo;
```

### 路由切页模式

```jsx
import React from "react";
import { MRichText } from "@weapp/ui";
interface DemoState {
  value: string
}

const extraPlugins = [
  // 撤销回退
  'undo',
  // 格式
  'format',
  'stylescombo',
  // 对齐方式
  'justify',
  // 首行缩进
  'textindent',
  // 序号
  'list',
  'liststyle',
  // 图片
  'image2',
  'uploadimage',
  // 表格
  'table',
  'tableselection',
  'tabletools',
  'tableresizerowandcolumn', // 表格拖拽调整宽高
  // 链接
  'link',
  "scayt",
  'customExtend'
];

const toolbar = [[
  "Undo", // 撤销
  "Redo", // 回退
  "-",
  "Font", // 字体
  "FontSize", // 字号
  "TextColor", // 颜色
  "BGColor", // 背景色
	"FillColor", // 填充色
  "Bold", // 加粗
  "Italic", // 斜体
  "-",
  "TextIndent", // 首行缩进
  "-",
  "NumberedList", // 编号列表
  "BulletedList", // 项目列表
  "-",
  "JustifyLeft", // 居左
  "JustifyCenter", // 居中
  "JustifyRight", // 居右
  "JustifyBlock", // 两端对齐
  "-",
  "Link", // 链接
  "Table", // 表格
  "CustomExtendBtn", // 自定义的按钮 - 用来和extraPlugins进行绑定使用 （和extendsConfig扩展配置一一对应,toolbar中的位置绝对最终渲染的位置）
  "CustomExtendBtn",
  "Scayt", // 拼写检查
]];

class Demo extends React.Component<{}, DemoState> {
  editor: any;

  constructor(props: {}) {
    super(props);
    this.state = {
      value: ''
    }
  }

  componentWillUnmount() {
    this.editor = null; // 防止内存泄漏
  }

  onReady = (editor: any, store: any) => {
    // onReady: 做当前组件的editor绑定
    console.log('onReady', editor, store);
    this.editor = editor;
  }

  onChange = (data: string, editor: any) => {
    console.log('onChange', { data, editor });
  }

  onBlur = (data: string, editor: any) => {
    console.log('onBlur', { data, editor });
  }

  onFocus = (data: string, editor: any) => {
    console.log('onFocus', { data, editor });
  }

  onOk = (data: string, editor: any) => {
    console.log('onOk', { data, editor });
    // 保存的时候更改value受控的值
    this.setState({ value: data });
  }

  onCancel = (editor: any) => {
    console.log('onCancel', { editor });
  }

  render() {
    const { value } = this.state;

    const ckConfig = {
      extraPlugins,
      toolbar,
      editorplaceholder: '请输入:\n1、要点1\n2、要点2', // 通过\n控制提示语是否换行
    }

    const extendsConfig = [
      {
        name: 'imageUpload', // 组件名称
        title: '插入图片', // 工具栏提示文字
        comProps: { // 组件属性
          uploadUrl: '/api/file/module/upload',
          uploadParams: {
            module:"document",
          }
        }
      },
      { 
        name: 'emoticon', // 组件名称
        title: '插入表情', // 工具栏提示文字
      }
    ];
    
    return (
      <MRichText
        id="richtext_demo_route" // 注意: id必填，并且唯一
        isRouteLayout={true} // 是否路由切页模式
        placeholder={'请输入:\n1、要点1\n2、要点2'} // 通过\n控制提示语是否换行
        showVoiceToTextBtn // 是否显示语音转文字按钮
        value={value}
        autoFocus={true} // 默认focus
        ckConfig={ckConfig}
        extendsConfig={extendsConfig}
        onReady={this.onReady}
        // onChange={this.onChange}
        // onBlur={this.onBlur}
        // onFocus={this.onFocus}
        onOk={this.onOk} // 保存按钮的回调
        // onCancel={this.onCancel} // 取消按钮的回调
      />
    );
  }
}

export default Demo;
```

### 路由切页模式-自定义

```jsx
import React from "react";
import { MRichText, MButton } from "@weapp/ui";

interface DemoState {
  value: string
}

const extraPlugins = [
  // 撤销回退
  'undo',
  // 格式
  'format',
  'stylescombo',
  // 对齐方式
  'justify',
  // 首行缩进
  'textindent',
  // 序号
  'list',
  'liststyle',
  // 图片
  'image2',
  'uploadimage',
  // 表格
  'table',
  'tableselection',
  'tabletools',
  'tableresizerowandcolumn', // 表格拖拽调整宽高
  // 链接
  'link',
  'customExtend'
];

const toolbar = [[
  "Undo", // 撤销
  "Redo", // 回退
  "-",
  "Font", // 字体
  "FontSize", // 字号
  "TextColor", // 颜色
  "BGColor", // 背景色
	"FillColor", // 填充色
  "Bold", // 加粗
  "Italic", // 斜体
  "-",
  "TextIndent", // 首行缩进
  "-",
  "NumberedList", // 编号列表
  "BulletedList", // 项目列表
  "-",
  "JustifyLeft", // 居左
  "JustifyCenter", // 居中
  "JustifyRight", // 居右
  "JustifyBlock", // 两端对齐
  "-",
  "Link", // 链接
  "Table", // 表格
  "CustomExtendBtn", // 自定义的按钮 - 用来和extraPlugins进行绑定使用 （和extendsConfig扩展配置一一对应,toolbar中的位置绝对最终渲染的位置）
  "CustomExtendBtn",
]];

class Demo extends React.Component<{}, DemoState> {
  editor: any;

  constructor(props: {}) {
    super(props);
    this.state = {
      value: ''
    }
  }

  componentWillUnmount() {
    this.editor = null; // 防止内存泄漏
  }

  onReady = (editor: any, store: any) => {
    // onReady: 做当前组件的editor绑定
    console.log('onReady', editor, store);
    this.editor = editor;
  }

  onChange = (data: string, editor: any) => {
    console.log('onChange', { data, editor });
  }

  onBlur = (data: string, editor: any) => {
    console.log('onBlur', { data, editor });
  }

  onFocus = (data: string, editor: any) => {
    console.log('onFocus', { data, editor });
  }

  onOk = (data: string, editor: any) => {
    console.log('onOk', { data, editor });
    // 保存的时候更改value受控的值
    this.setState({ value: data });
  }

  onCancel = (editor: any) => {
    console.log('onCancel', { editor });
  }

  render() {
    const { value } = this.state;

    const ckConfig = {
      extraPlugins,
      toolbar
    }

    const extendsConfig = [
      {
        name: 'imageUpload', // 组件名称
        title: '插入图片', // 工具栏提示文字
        comProps: { // 组件属性
          uploadUrl: '/api/file/module/upload',
          uploadParams: {
            module:"document",
          }
        }
      },
      { 
        name: 'emoticon', // 组件名称
        title: '插入表情', // 工具栏提示文字
      }
    ];
    
    return (
      <MRichText
        id="richtext_demo_route_custom" // 注意: id必填，并且唯一
        isRouteLayout={true} // 是否路由切页模式
        value={value}
        autoFocus={true} // 默认focus
        ckConfig={ckConfig}
        extendsConfig={extendsConfig}
        onReady={this.onReady}
        // onChange={this.onChange}
        // onBlur={this.onBlur}
        // onFocus={this.onFocus}
        onOk={this.onOk} // 保存按钮的回调
        // onCancel={this.onCancel} // 取消按钮的回调
      >
        <MButton>这是自定义显示,点击进去编辑区域</MButton>
      </MRichText>
    );
  }
}

export default Demo;
```

## API

### Tip

```
1、上传鉴权：上传类功能（如图片、视频、附件等）需要鉴权 -- 可参考自定义扩展 demo 实例：
（1）上传鉴权参数统一传 `uploadParams`， 其中 `module` 字段必填
（2）预览鉴权参数请统一传 `uploadPreviewParams`
2、只读场景：优先使用组件的 `readOnly` 参数，不要自行处理 DOM 只读，否则部分功能可能会失效，甚至出现报错。
3、安全说明：源码模式已禁用（涉及 XSS 风险），请勿开启源码模式。
4、数据读受控写优先采用以下方案：
(1) 推荐通过 `defaultValue` 设置初始值
(2) 推荐通过 store 的 `getData`、`setData` 方法读写数据
5、插入图片、插入视频功能，可以通过 [后台管理中心 --> 通用设置 --> 富文本组件设置] 进行个性化配置
```

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| isRouteLayout | 是否切路由形式 | boolean | 否 | false |
| placeholder | 切路由前只读情况的提示文字 | string | 否 | '请输入' |
| buttons | 自定义路由层底部显示按钮 | MRichTextButtonItemData[] | 否 | - |
| id | 编辑器唯一标识(注意每一个编辑器的 id 不同) | string | 是 | - |
| defaultValue | 默认编辑器内的值（不需要受控配置默认值即可） | string | 否 | - |
| value | 编辑器内的值（受控使用） | string | 否 | - |
| disabled | 是否禁用编辑器 | boolean | 否 | false |
| readOnly | 是否只读 | boolean | 否 | false |
| loginFree | 是否为免登陆模式（免登陆访问,图片附件上传预览等地址有所不同） | boolean | 否 | false |
| showVoiceToTextBtn | 是否显示语音转文字按钮（仅 em 生效） | boolean | 否 | false |
| autoFocus | 是否默认获得光标 | boolean | 否 | false |
| isScrollToolbar | 工具栏超长是否为滚动,配置false则折行显示 | boolean | 否 | true |
| readOnlyShowPlaceholder | 只读的时候是否显示提示语 | boolean | 否 | false |
| ckConfig | 编辑器配置,见下方配置说明 | object | 否 | - |
| extendsConfig | 扩展插件配置（RichTextExtendItemConfig 详见以下说明） | RichTextExtendItemConfig[] | 否 | - |
| defaultCursorPosition | 默认光标位置 | 'first' \| 'last' | 否 | 'first' |
| defaultHideToolBar | 默认隐藏工具栏,获得光标显示,失去光标隐藏 | boolean | 否 | false |
| atMentionConfig | 输入框内@功能配置,见下方 AtMentionConfig 配置说明 | AtMentionConfig | 否 | - |
| enableHighLight | 启用敏感词高亮效果 | boolean | 否 | - |
| highLightProps | 敏感词高亮自定义配置 | AnyObj | 否 | - |
| imagePreviewParams | 图片预览参数（透传给只读状态下图片预览 MPhotoView.showImage的参数,参考PhotoViewProps） | PhotoViewProps | 否 | - |
| customImagePreviewData | 自定义只读状态下图片预览数据（例如按照PhotoView复写数据，增加hideDownload属性影响下载按钮） | (data: PhotoViewData[]) => PhotoViewData[] | 否 | - |
| customImagePreviewUrl | 自定义触发上传后的图片预览地址 | (data: UploadData, url: string) => string | 否 | - |
| customUploadPreviewUrl | 自定义通用上传预览地址(包括图片、视频),兼容已有数据 | (data: { fileid: string, type: 'image' \| 'video' \| 'redirect' }, url: string) => string | 否 | - |
| autoIdentifyTextLinks | 只读的时候是否默认识别链接文本，转为超链接（注意：文本链接需要与其他文本前后存在空格） | boolean | 否 | true |
| getScrollNodes | 用于只读的时候获取业务滚动层,懒加载图片(可能有多个) | () => any | 否 | - |
| onReady | 编辑器初始化回调 | (editor: any, store: any) => void | 否 | - |
| onChange | 编辑器内值改变的回调 | (data: string, editor: any, store: any) => void | 否 | - |
| onFocus | 编辑器获得焦点的回调 | (data: string, editor: any, store: any) => void | 否 | - |
| onBlur | 编辑器失去焦点的回调 | (data: string, editor: any, store: any) => void | 否 | - |
| onOk | 路由模式点击保存的回调 | (data: string, editor: any, store: any) => void | 否 | - |
| onCancel | 路由模式点击取消的回调 | (data: string, editor: any, store: any) => void | 否 | - |
| routeLayoutProps | 路由层模式的属性 | {  style?: CSSProperties } | 否 | {} |
| formatMobileStyle | 是否格式化移动端样式 | boolean | 否 | flase |
| themeClassName | ckeditor容器的class | string | 否 | - |
### RichTextExtendItemConfig 配置

| 参数 | 说明 | 类型 | 是否必填 |
| --- | --- | --- | --- |
| name | 组件名称 | string | 否 |
| title | 提示文字 | string | 是 |
| icon | 自定义显示图标 | string \| ReactNode | 否 |
| content | 自定义显示内容（参考自定义 demo） | ReactNode | 否 |
| comProps | 关联组件属性, 和 name 配合使用 | any | 否 |
### RichTextExtendItemConfig 中 name 为'imageUpload'视频的 comProps 属性说明

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| showModal | 是否为弹框上传 | boolean | true |
| uploadProps | 自定义其中上传组件的属性 | UploadProps | - |
| dialogProps | 自定义弹框属性 | DialogProps | - |
| defaultImageParams | 默认上传视频弹框中的属性配置,包括: 视频尺寸 sizeType('default' \|'custom') ; 宽度 width; 高度 height; 对齐方式 align: ('none' \| 'left' \| 'right' \| 'center') | AnyObj | - |
### RichTextExtendItemConfig 中 name 为'videoUpload'视频的 comProps 属性说明

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| showModal | 是否为弹框上传 | boolean | true |
| showTabs | 是否可切换选择上传本地视频或者网络视屏 | boolean | false |
| uploadProps | 自定义其中上传组件的属性 | UploadProps | - |
| dialogProps | 自定义弹框属性 | DialogProps | - |
| defaultVideoParams | 默认上传视频弹框中的属性配置,包括: 视频尺寸 sizeType('default' \|'custom') ; 宽度 width; 高度 height; 对齐方式 align: ('none' \| 'left' \| 'right' \| 'center') | AnyObj | - |
### 通过 ref 拿到组件的 store 可调用的方法

如果不需要特殊处理,直接 onReady 拿到 editor,按照 editor 常用方法使用即可

| 参数 | 说明 | 类型 |
| --- | --- | --- |
| getData | 获取过滤二级路径后的数据,通过instance.getData获取原数据 | () => data |
| getBodyHtml | 获取过滤二级路径后的数据,通过instance.document.getBody().getHtml获取原数据 | () => data |
| setData | 设置值 | (value: string) => void |
| destroy | 销毁编辑器 | () => void |
| insertText | 插入纯文本 | (text: string) => void |
| insertHtml | 插入 html | (html: string) => void |
| focus | 获得光标 position: 'first' \| 'last' \| ''; noNeedFocus:是否只是移动位置但是不 focus,默认为 false | (position?: string, noNeedFocus?: boolean) => void |
| getExtendsData | 过滤输入框的值,拿到指定的插入数据,例如通过 getExtendsData('at')获取输入框内的 at 数据, filterRule 可自定义,默认为`a[pluginname=${pluginName}]` | (pluginname: string, filterRule?: string) => array |
### 组件抛出的公共方法,直接通过 RichText.xxx 使用

| 参数 | 说明 | 类型 |
| --- | --- | --- |
| matchSensitiveWords | 敏感词高亮匹配 | (data: string, word: string[]) => newData |
| unMatchSensitiveWords | 取消敏感词高亮匹配 | (data: string) => newData |
| getUploadPreviewUrl | 通过标准上传功能上传的图片、视频, 合成最终的的预览的url地址,`url`为当前的预览地址,`fileid`为上传附件id, `type`为附件类型, `uploadPreviewParams`为鉴权参数; url \| filrid + type 组合二选一即可 | (params: { url?: string; fileid?: string, type?: 'image' \| 'video' \| 'redirect', isMobile?: boolean, loginFree?: boolean, uploadPreviewParams?: AnyObj, originalParams?: AnyObj }) => string |
| transUploadPreviewUrl | 提取html中通过标准上传功能上传的图片、视频的url地址，增加业务的鉴权参数，并返回新的html | (params: { data: string, isMobile?: boolean, isLoginFree?: boolean; uploadPreviewParams?: AnyObj}) => string |
#### ckConfig 常用配置说明，详见 ckeditor 官方配置文档

Tip: **字体下拉列表 和 默认字体配置 注意事项:**

```
1、字体下拉列表需同时配置 中文列表：'font_names_zh_cn'、简体中文列表：'font_names_zh'、英文列表：'font_names_en', 组件依据系统当前语言读取对应列表。
例如: 中文的 '微软雅黑/Microsoft YaHei', 简体中文显示为 '微軟雅黑/Microsoft YaHei', 英文可直接使用 'Microsoft YaHei'。
2、如果配置了默认字体font_defaultLabel, 以上下拉列表中都能找到该字体的英文,否则默认字体无法生效
```

| 参数 | 说明 | 类型 | 默认 |  |
| --- | --- | --- | --- | --- |
| toolbar | 工具栏配置 | array |  |  |
| extraPlugins | 扩展插件 | string |  |  |
| editorplaceholder | 提示文字 | string | '请输入' |  |
| language | 语言 | string | 'zh_cn' |  |
| uploadUrl | 粘贴图片上传地址 | string | '/api/file/module/upload' |  |
| uploadParams | 粘贴图片上传参数(需要上传图片为 module 为必填) | object |  |  |
| height | 默认高度 | number | 200 |  |
| cssText | 自定义Ckeditor的Iframe里的样式 | string |  |  |
| image2_hideContextMenu | 取消图片的右键菜单 | boolean | false |  |
| fullPage | 编辑内容作为完整的html页面输出, 文档模块使用 | boolean | false |  |
| font_names_zh_cn | 中文字体列表 | string | '微软雅黑/Microsoft YaHei;微软正黑/Microsoft JhengHei;宋体/SimSun;新宋体/NSimSun;仿宋/FangSong;仿宋_GB2312/FangSong_GB2312;方正小标宋简体/FZXiaoBiaoSong-B05S;楷体/KaiTi;楷体_GB2312/KaiTi_GB2312;黑体/SimHei;华文细黑/STXihei;华文楷体/STKaiti;华文宋体/STSong;华文中宋/STZhongsong;华文仿宋/STFangsong;华文彩云/STCaiyun;华文琥珀/STHupo;华文隶书/STLiti;华文行楷/STXingkai;华文新魏/STXinwei;方正舒体/FZShuTi;方正姚体/FZYaoti;细明体/MingLiU;新细明体/PMingLiU;Arial;Comic Sans MS;Courier New;Georgia;Lucida Sans Unicode;Tahoma;Times New Roman;Trebuchet MS;Verdana' |  |
| font_names_zh | 繁体中文字体列表 | string | '微軟雅黑/Microsoft YaHei;微軟正黑/Microsoft JhengHei;宋體/SimSun;新宋體/NSimSun;仿宋/FangSong;仿宋_GB2312/FangSong_GB2312;方正小標宋簡體/FZXiaoBiaoSong-B05S;楷體/KaiTi;楷體_GB2312/KaiTi_GB2312;黑體/SimHei;華文細黑/STXihei;華文楷體/STKaiti;華文宋體/STSong;華文中宋/STZhongsong;華文仿宋/STFangsong;華文彩雲/STCaiyun;華文琥珀/STHupo;華文隸書/STLiti;華文行楷/STXingkai;華文新魏/STXinwei;方正舒體/FZShuTi;方正姚體/FZYaoti;細明體/MingLiU;新細明體/PMingLiU;Arial;Comic Sans MS;Courier New;Georgia;Lucida Sans Unicode;Tahoma;Times New Roman;Trebuchet MS;Verdana' |  |
| font_names_en | 英文字体列表 | string | 'Microsoft YaHei;Microsoft JhengHei;Arial;Comic Sans MS;Courier New;Georgia;Lucida Sans Unicode;Tahoma;Times New Roman;Trebuchet MS;Verdana;SimSun;NSimSun;FangSong;FangSong_GB2312;FZXiaoBiaoSong-B05S;KaiTi;KaiTi_GB2312;SimHei;STXihei;STKaiti;STSong;STZhongsong;STFangsong;STCaiyun;STHupo;STLiti;STXingkai;STXinwei;FZShuTi;FZYaoti;MingLiU;PMingLiU' |  |
| fontWeight_default | 默认字体加粗 | string \| number | 400\|'normal' |  |
| font_defaultLabel | 默认字体 | string | '微软雅黑/Microsoft YaHei' |  |
| font_defaultColor | 默认字体颜色 | string |  |  |
| fontSize_defaultLabel | 默认字号 | string | '12/12px' |  |
| lineHeight_defaultLabel | 默认行间距 | string |  |  |
| fontSize_sizes | 字号列表 | string |  |  |
| forcePasteAsPlainText | 将所有内容粘贴为纯文本 | boolean | false |  |
| contentsCss | 编辑器默认加载的样式文件（可以覆盖编辑器加载的样式文件） | string \| string[] |  |  |
| mentions | 输入框内联想匹配配置(详见https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_plugins_mentions_configDefinition.html) | array |  |  |
| pasteFilter | 粘贴或放入编辑器中的外部数据的过滤器(`null`: 不做任何过滤; `semantic-content`: 保留除了div、span的标签和除了style和class的属性; `plain-text`: 只保留纯文本) | `null` \| `semantic-content` \| `plain-text` \| 参考官方文档自定义 | `null` |  |
| onImageInsertBefore | 复制粘贴和拖拽上传图片插入编辑器前的回调,需要返回 true\|false,true 表明仍然需要插入到编辑器;false 表明不需要再插入到编辑器中(组件内部新增属性) | (fileData) => boolean |  |  |
| removeSecondPath | 获取富文本文档预览数据时是否移除二级路径(组件内部新增属性) | boolean | true |  |
```
plugins 插件配置说明:

plugins = [
  // 基本(默认已加载,extraPlugins 中不需要反复加载 simple 模式就只加载了这些插件)
  'toolbar',
  'clipboard',
  'enterkey',
  'entities',
  'wysiwygarea',
  // 撤销回退
  'undo',
  // markdown
  'markdown',
  // 格式
  'format',
  'stylescombo',
  // 字体 字号
  'font'
  // 添加文本 颜色 和背景色
  'colorbutton',
  // 加粗、斜体、下划线、删除线
  'basicstyles'
  // 首行缩进
  'textindent',
  // 增加 | 减少缩进量
  'indentlist',
  'indentblock',
  // 对齐方式
  'justify',
  // 序号
  'list',
  'liststyle',
  // 图片
  'image2',
  'uploadimage',
  // 编辑视频
  'html5video',
  // 表格
  'table',
  'tableselection',
  'tabletools',
  'tableresizerowandcolumn', // 支持表格拖拽行列调整宽高
  // 链接
  'link',
  //粘贴链接自动转换为超链接
  'autolink',
  // 最大化
  'maximize',
  // 复制 word、excel(启用之后，如果没有设置 forcePasteAsPlainText,那么从任何地方复制的内容都会覆盖样式属性)
  'pastefromword',
  // 块引用
  'blockquote',
  // 特殊标签联想搜索和匹配
  'mentions',
  // 编辑区域随内容撑开
  'autogrow',
  // 拼写检查
  "scayt",
]

工具栏 toolbar 配置说明：
const toolbar = [[
  "Undo", // 撤销
  "Redo", // 回退
  "-",
  'Markdown', // Markdown
  "-",
  "SelectAll", // 全选
  "Find", // 查找
  "Replace", // 替换
  "-",
  "Cut", // 剪切
  "Copy", // 复制
  "CopyFormatting", // 格式刷
  "RemoveFormat", // 清楚格式
  "-",
  "Format", // 格式
  "Font", // 字体
  "FontSize", // 字号
  "TextColor", // 颜色
  "BGColor", // 背景色
	"FillColor", // 填充色
  "-",
  "Bold", // 加粗
  "Italic", // 斜体
  "Underline", // 下划线
  "Strike", // 删除线
  "Subscript", // 下标
  "Superscript", // 上标
  "-",
  "NumberedList", // 编号列表
  "BulletedList", // 项目列表
  "-",
  "TextIndent", // 首行缩进
  "Indent", // 增加缩进量
  "Outdent", // 减少缩进量
  "-",
  "JustifyLeft", // 居左
  "JustifyCenter", // 居中
  "JustifyRight", // 居右
  "JustifyBlock", // 两端对齐
  "-",
  "Link", // 链接
  "Unlink", // 删除链接
  "Anchor", // 锚点
  "-",
  "SpecialChar", // 特殊字符
  "HorizontalRule", // 插入水平线
  "PageBreak", // 插入打印分页符
  "Iframe", // 插入 iframe
  "Table", // 表格
  "Scayt", // 拼写检查
  "Maximize" // 最大化
]],
```
