TinyEditor v4.0 alpha：表格更强大，表情更丰富，上传体验超乎想象！-优快云博客

本文链接：https://blog.youkuaiyun.com/OpenTiny/article/details/149404186

本文由体验技术团队Kagol原创，个人公众号：前端开源星球。

TinyEditor 是一个基于 Quill 2.0 的富文本编辑器，在 Quill 基础上扩展了丰富的模块和格式，框架无关、功能强大、开箱即用。

源码：https://github.com/opentiny/tiny-editor
官网：https://opentiny.github.io/tiny-editor

对于富文本编辑器来说，插入图片、视频、表情，插入和编辑表格，这些都是非常常见的功能，因此我们对这几个模块做了重点优化和重构。

更强大的表格

之前的表格模块基于 quill-better-table 实现，现在这个项目已经不维护了，为了让 TinyEditor 的表格功能更好地演进下去，TinyEditor 项目核心贡献者 zzxming 对表格模块进行了重构，使用了 quill-table-up 作为底层实现，替换了不维护的 quill-better-table。

quill-table-up 是 zzxming 设计和实现的，基于 Quill 2.0，拥有更好的模块化设,、更强的功能、更优的体验，而且一直在持续维护中。

quill-table-up 支持 quill-better-table 所有的功能，并且做了大量增强：

支持单元格中插入块级元素，比如：标题、引用、代码块等
支持自定义单元格背景色、边框颜色
拖拽改变行高/列宽，调整表格整体宽高
除了右键工具栏菜单，还支持常驻显示工具栏
支持斜线快捷菜单插入表格，支持上下左右方向键选择表格行/列大小

quill-table-up 做了很好的模块化设计，每个特性是一个单独的文件，支持按需引入和使用，这一点对于富文本这边的大型组件来说非常友好，可能每个业务只需要其中一部分功能，就可以不需要引入，打包时也不会包含这个特性的代码，能有效地减少包体积。

感谢 zzxming 在表格模块重构和优化中付出的努力，提升了 TinyEditor 富文本编辑器的表格操作体验。

欢迎朋友们给 quill-table-up 开源项目点个 Star 支持下！

源码：https://github.com/zzxming/quill-table-up（欢迎 Star）

使用起来非常简单。

import FluentEditor, { generateTableUp } from '@opentiny/fluent-editor'
// 按需导入 quill-table-up 特性模块
import { defaultCustomSelect, TableMenuSelect, TableSelection, TableUp } from 'quill-table-up'
// 引入样式文件
import 'quill-table-up/index.css'
import 'quill-table-up/table-creator.css'

// 注册 table-up 模块
FluentEditor.register({ 'modules/table-up': generateTableUp(TableUp) }, true)

const TOOLBAR_CONFIG = [
  [{ header: [] }],
  ['bold', 'italic', 'underline', 'link'],
  [{ list: 'ordered' }, { list: 'bullet' }],
  ['clean'],
  // 配置工具栏菜单项
  [{ 'table-up': [] }],
]

new FluentEditor(element, {
  theme: 'snow',
  modules: {
    'toolbar': TOOLBAR_CONFIG,
    // 配置 table-up 模块
    'table-up': {
      // 配置工具栏中选择表格行/列数量
      customSelect: defaultCustomSelect,
      
      // 配置拖选多个单元格，进行后续操作，比如：合并单元格、设置单元格背景色等
      selection: TableSelection,
      selectionOptions: {
        // 配置工具栏菜单的显示方式，支持点击右键显示、选择单元格后常驻显示两种形式
        tableMenu: TableMenuSelect,
      },
    },
  },
})

效果如下：

在这里插入图片描述

更丰富的表情

在富文本中插入表情，虽然不是一个必须的功能，但却能让富文本内容更加有趣，比如我用富文本编辑器写一篇文章，如果能再文章中插入可可爱爱的 Emoji 表情，将是一件多么美妙的事情。

之前的 TinyEditor 支持的表情数量有限，而且没有做分类，不支持搜索，想要找一个想要的表情太难了。vaebe 基于 emoji-mart 实现了一个新的 Emoji 模块，不仅支持更多表情，而且做了分类，支持表情的搜索、预览、最近实用的表情等实用的功能。

使用之前需要先安装对应的依赖：

npm i @floating-ui/dom @emoji-mart/data emoji-mart

然后分别在工具栏和模块开启 emoji 即可。

import FluentEditor from '@opentiny/fluent-editor'

const TOOLBAR_CONFIG = [
  [{ header: [] }],
  ['bold', 'italic', 'underline', 'link'],
  [{ list: 'ordered' }, { list: 'bullet' }],
  ['clean'],
  // 配置 Emoji
  ['emoji'],
]

new FluentEditor(element, {
  theme: 'snow',
  modules: {
    'toolbar': TOOLBAR_CONFIG,
    // 配置 emoji 模块
    'emoji': true,
  },
})

效果如下：

在这里插入图片描述

对比下之前的表情面板：

在这里插入图片描述

新版的表情功能，UI 和体验都比之前的好太多了，感谢 vaebe 给我们提供了一个这么好用的表情功能。

体验更好的图片/视频/文件上传功能

“富文本”意味着不仅仅是文字，还包含图片、视频等更丰富的内容，之前的图片、视频、文件上传是独立的三个模块，这就导致很多功能上的重复，比如校验文件格式、大小，多图、多文件上传，调整图片、视频宽高，图片、文件的下载等功能，每个模块都要实现一遍。

zzxming 敏锐地识别到了这个问题，并将图片、视频、文件模块合并成一个模块，默认会处理视频与图片格式，其他格式统一被处理为文件显示。

图片可以拉伸放大缩小，可以左中右对齐，可以复制、下载
视频可以播放、暂停、下载、全屏、调整声音
文件可以查看大小、下载、删除

使用起来非常简单，只需要在工具栏配置中配置即可。

import FluentEditor from '@opentiny/fluent-editor'

const TOOLBAR_CONFIG = [
  [{ header: [] }],
  ['bold', 'italic', 'underline', 'link'],
  [{ list: 'ordered' }, { list: 'bullet' }],
  ['clean'],
  // 配置图片、视频、文件上传功能
  ['file', 'image', 'video'],
]

new FluentEditor(element, {
  theme: 'snow',
  modules: {
    'toolbar': TOOLBAR_CONFIG,
  },
})