TinyEditor v4.0 alpha：表格更強大，表情更豐富，上傳體驗超乎想象！詳情 - 前端,富文本編輯器,開源 OpenTiny社區博客

本文由體驗技術團隊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,
      },
    },
  },
})

效果如下：

更多特性歡迎大家使用和體驗。

體驗地址：https://opentiny.github.io/tiny-editor/docs/demo/table-up

更豐富的表情

在富文本中插入表情，雖然不是一個必須的功能，但卻能讓富文本內容更加有趣，比如我用富文本編輯器寫一篇文章，如果能再文章中插入可可愛愛的 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 給我們提供了一個這麼好用的表情功能。

更多特性歡迎大家使用和體驗。

體驗地址：https://opentiny.github.io/tiny-editor/docs/demo/emoji

體驗更好的圖片/視頻/文件上傳功能

“富文本”意味着不僅僅是文字，還包含圖片、視頻等更豐富的內容，之前的圖片、視頻、文件上傳是獨立的三個模塊，這就導致很多功能上的重複，比如校驗文件格式、大小，多圖、多文件上傳，調整圖片、視頻寬高，圖片、文件的下載等功能，每個模塊都要實現一遍。

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,
  },
})

效果如下：

更多特性歡迎大家使用和體驗。

體驗地址：https://opentiny.github.io/tiny-editor/docs/demo/file-upload

往期推薦文章

👍TinyEditor：一個基於 Quill 2.0 的富文本編輯器，功能強大、開箱即用！
🎈TinyEditor 富文本開源2個月的總結：增加格式刷、截屏、TypeScript 類型聲明等新特性
🥳重磅更新！TinyEditor 開源富文本支持 LaTeX 可編輯公式啦 ~
🎉喜報！TinyEditor 開源富文本迎來了第一位貢獻者
👏讓我們一起來建設 TinyEditor 開源富文本編輯器吧！
✨TinyEditor v3.25.0 正式發佈！2025年第一個版本，增加標題列表導航、分隔線等實用特性

關於OpenTiny

歡迎加入 OpenTiny 開源社區。添加微信小助手：opentiny-official 一起參與交流前端技術～

OpenTiny 官網：https://opentiny.design
OpenTiny 代碼倉庫：https://github.com/opentiny
TinyVue 源碼：https://github.com/opentiny/tiny-vue
TinyEngine 源碼： https://github.com/opentiny/tiny-engine
歡迎進入代碼倉庫 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI、TinyEditor ~

如果你也想要共建，可以進入代碼倉庫，找到 good first issue標籤，一起參與開源貢獻 ~

OpenTiny社區博客

OpenTiny社區博客

博客 / 詳情