富文本组件-

[yq]

汇总

1. Draft.js

Rich Text Editor Framework for React

二级市场：

1. braft-editor

2. quilljs

Your powerful rich text editor.

二级市场：

1. react-quill
2. ql-editor
   Vue版的quilljs

3. Slatejs

Slate is a completely customizable framework for building rich text editors.

真的做到完全自定义了，甚至都没有UI，只有富文本编辑器的核心功能。

哪些功能强大的

一直觉得Atlassian的富文本编辑器很强的尤其对表格的支持，研究了发现原来他们采用的是TinyMCE富文本编辑器。

参考

1. Top 5 Rich Text Editors for React in 2021
2. Slate.js - 革命性的富文本编辑框架

[yq]

Quill

[kwɪl]

概念

1. Formats: 直面意思是格式，从配置上看是Quill支持的格式化操作。
2. Modules：扩展，自定义Quill的功能。一般是非格式化相关的功能。
3. Delta：Deltas represents both documents and changes to documents.
4. Embeds: 指非文本内容

Formats

Format表示Quill支持的格式化操作，用一个字符串表示。Format = UI + API调用：

1. UI：用于操作
2. API调用：控制如何生产富文本字符串

分类

1. 行内（inline）：只影响选择的文本
2. 块（Block）：影响整行文本（光标所在的行，或者已选择的文本所在的行）
3. 内嵌（Embeds）：一般指非文本元素，如图片，视频，数学表达式等。

注意： 光标左右移动的最小单位就是一个format。比如插入了一个数学表达式，光标只能在表达上左右两边：

自定义Format

1. 实现
2. 注册：同名覆盖
3. 使用

1. 实现

选择合适的基类，可以参考内置Formats（在/formats目录下）的实现。

2. 注册

同名覆盖

3. 使用

Deltas

Deltas represents both documents and changes to documents.

Embeds

指非文本内容，如图片，视频，数学表达式等。

Modules

扩展，自定义Quill的功能。一般是非格式化相关的功能。

分类

1. 内置Modules
2. 自定义Modules

配置

var quill = new Quill('#editor', {
  // Key: Module名字, value:  Module配置
  modules: {
    'history': {          // 启动自定义配置
      'delay': 2500,
      'userOnly': true
    },
    'syntax': true        // 启动默认配置
  }
});

自定义Module

1. 实现
2. 注册
3. 使用（指定配置）

DEMO: quill-html-edit-button

Issues

1. How do I add "show html" button in Quill like in Wysiwyg?
2. Add a source-code button