🎈Fluent Editor 富文本開源2個月的總結：增加格式刷、截屏、TypeScript 類型聲明等新特性詳情 - 前端,typescript,富文本編輯器 Kagol 博客

你好，我是 Kagol，個人公眾號：前端開源星球。

Fluent Editor 是一個基於 Quill 2.0 的富文本編輯器，在 Quill 基礎上擴展了豐富的模塊和格式，框架無關、
功能強大、開箱即用。

2024年8月12日，Fluent Editor 正式開源！

源碼：https://github.com/opentiny/fluent-editor/
官網：https://opentiny.github.io/fluent-editor/

Fluent Editor 的前身是我在2019年基於 Quill 做的一款富文本編輯器：EditorX，最早 EditorX 只是在公司內部使用，做 EditorX 的過程讓我對 Quill 這款開源富文本有了更加深入的瞭解，沉澱了《深入淺出 Quill》系列文章。

2021年5月28日，我在華為HWEB大前端技術分享會上分享了我做 Quill 富文本編輯器的實踐：

Quill 富文本編輯器的實踐

Fluent Editor 雖然剛開源2個多月，但其實已經在公司內部大量業務中使用，是一個成熟穩定的富文本編輯器。

目前 Fluent Editor 最新版本是：v3.21.0

npm i @opentiny/fluent-editor@3.21.0

歡迎大家體驗和使用！

近期開發的新特性

雖然 Fluent Editor 在公司內部使用很久了，但開源之後，依然收到了更廣泛的社區開發者的 issue，我們持續響應，在這兩個多月完成了很多實用的功能。

格式刷

第一個功能是格式刷，這個功能很小，但是很實用，而且 Quill 並沒有內置。

該功能由 Fluent Editor 核心貢獻者 zzxming 實現。

使用起來很方便，只需要配置下工具欄，增加 format-painter 格式即可。

const TOOLBAR_CONFIG = [
  [{ header: [] }],
  ['bold', 'italic', 'underline', 'link'],
  [{ list: 'ordered' }, { list: 'bullet' }],
  ['clean'],
  ['format-painter'], // 增加格式刷功能
]

const editor = new FluentEditor('#editor', {
  theme: 'snow',
  modules: {
    toolbar: TOOLBAR_CONFIG
  }
})

使用體驗和 Word 中的格式刷是一樣的，選中一段帶格式的文本，點擊工具欄中的格式刷圖標，然後選擇另一段文本，這段文本就刷成了對應的格式。

雙擊格式刷圖標，還可以連續刷格式，非常實用。

體驗地址：https://opentiny.github.io/fluent-editor/docs/format-painter

截屏

富文本編輯器還能截屏？！截屏這個功能業界大部分富文本編輯器都沒有，也是 zzxming 同學實現的。

個人覺得這個功能還是挺實用的，比如我們要做一個用户反饋的功能，放到網站右下角，用户點擊之後出現一個富文本框，用户可以在裏面輸入反饋意見，提供反饋意見總免不了要截個圖，更方便地説明要反饋的問題，而此時用户並沒有打開微信等軟件，並且本身電腦也沒有安裝截屏工具。

這時富文本的截屏功能就能發揮作用啦！

點擊工具欄的截屏圖標，就能框選頁面區域進行截屏，截屏完，圖片會自動插入到富文本的光標位置，巨方便！

該功能基於 canvas2html，zzxming 同學非常貼心地解決了：當畫面中包含外部鏈接的圖片時，canvas2html 截圖出現空白的問題，所以如果你使用 Fluent Editor 的截屏功能，將不會出現該問題。

要給 Fluent Editor 配置截屏功能，需要先安裝 html2canvas 依賴包，並在初始化編輯器前將 Html2Canvas 變量暴露在 window 上。

import Html2Canvas from 'html2canvas'
window.Html2Canvas = Html2Canvas

然後配置工具欄按鈕 screenshot，可以開啓截屏功能。

const TOOLBAR_CONFIG = [
  [{ header: [] }],
  ['bold', 'italic', 'underline', 'link'],
  [{ list: 'ordered' }, { list: 'bullet' }],
  ['clean'],
  ['screenshot'], // 增加截屏功能
]

const editor = new FluentEditor('#editor', {
  theme: 'snow',
  modules: {
    toolbar: TOOLBAR_CONFIG
  }
})

體驗鏈接：https://opentiny.github.io/fluent-editor/docs/screenshot