本文由體驗技術團隊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
完善的 TypeScript 型別支援
Fluent Editor 本身是用 TypeScript 寫的,在最新的 v3.21.0 版本中,也支援了 TypeScript 型別宣告檔案匯出,開發者在使用 Fluent Editor 時有非常絲滑的型別提示。
當初始化 Fluent Editor 時,會提示建構函式的引數和相應的型別。
滑鼠移到 FluentEditor
關鍵字上也有提示。
配置 modules / toolbar 時也有完善的提示。
編輯器例項的方法也是有提示的。
更多實用功能等你來體驗!
- 表格
- 圖片上傳(支援圖片拉伸)
- 附件上傳
- 程式碼塊高亮
- @提醒(支援自定義 HTML)
- 插入公式
- 插入影片
- 插入 Emoji 表情
- Markdown 快捷鍵支援
- 字元統計
- 深色模式
- 超連結支援自動增加
https://
字首 - ...
歡迎社群的開發者朋友們給我們提供寶貴的意見,或者感興趣也歡迎參與我們的開源共建🤝
關於OpenTiny
OpenTiny官網:https://opentiny.design
TinyVue 原始碼:https://github.com/opentiny/tiny-vue(歡迎 Star ⭐)
TinyEngine 原始碼:https://github.com/opentiny/tiny-engine(歡迎 Star ⭐)
B站:https://space.bilibili.com/15284299
歡迎加入 OpenTiny 開源社群。新增微信小助手 opentiny-official 一起參與交流前端技術~