Fluent Editor：一個基於 Quill 2.0 的富文字編輯器，功能強大、開箱即用！

Kagol發表於2024-08-19
UI

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

今年4月份，聽到 Quill 2.0 正式釋出的訊息，我心情非常激動，立馬體驗了下，並寫了一篇文章。

重回鐵王座！時隔5年！Quill 2.0 終於釋出啦🎉

由於越來越多使用者聲音希望提供富文字元件，於是我們基於 Quill 2.0 封裝了一個功能更全面的 Fluent Editor 富文字。

  • 官網：https://opentiny.github.io/fluent-editor/
  • 原始碼：https://github.com/opentiny/fluent-editor/（歡迎 Star ⭐）

接下來我就帶大家一起使用下 Fluent Editor，使用起來基本上和 Quill 沒什麼區別，只需要重點關注下增強的部分，比如表格、附件、@提醒、表情等模組。

1 快速上手

Fluent Editor 基於 Quill 2.0 進行封裝，擴充套件了很多實用的模組功能，使用方式和 Quill 一樣。

安裝依賴：

npm i @opentiny/fluent-editor

編寫 HTML：

<div id="editor">
  <p><strong>Fluent Editor</strong> 是一個基於 <a class="ql-normal-link" href="https://quilljs.com/" target="_blank">Quill 2.0</a> 的富文字編輯器，在 Quill 基礎上擴充套件了豐富的模組和格式，功能強大、開箱即用。</p>
  <p><br></p>
  <p>官網：<a class="ql-normal-link" href="https://opentiny.github.io/fluent-editor/" target="_blank">https://opentiny.github.io/fluent-editor/</a></p>
  <p>原始碼：<a class="ql-normal-link" href="https://github.com/opentiny/fluent-editor/" target="_blank">https://github.com/opentiny/fluent-editor/</a>（歡迎 Star ⭐）</p>
</div>

引入樣式：

@import '@opentiny/fluent-editor/style.css';

初始化 Fluent Editor 編輯器：

import FluentEditor from '@opentiny/fluent-editor'

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

2 配置工具欄

配置工具欄是最常見的需求。

Fluent Editor 支援 27 種內建工具欄按鈕，當然也可以擴充套件。

除了支援 Quill 內建的 22 種工具欄之外，還支援以下工具欄：

  • undo 撤銷
  • redo 重做
  • better-table 表格
  • file 檔案上傳，需要啟用 file 模組
  • emoji 插入表情，需要啟用 emoji-toolbar 模組

Quill 支援的工具欄: https://quilljs.com/docs/modules/toolbar

可以透過 toolbar 模組配置工具欄按鈕：

import FluentEditor from '@opentiny/fluent-editor'

const toolbarOptions = [
  ['undo', 'redo'],                                 // Fluent Editor added
  ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
  ['blockquote', 'code-block'],
  ['link', 'image', 'video', 'formula'],

  [{ 'header': 1 }, { 'header': 2 }],               // custom button values
  [{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],
  [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
  [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
  [{ 'direction': 'rtl' }],                         // text direction

  [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

  [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
  [{ 'font': [] }],
  [{ 'align': [] }],

  ['clean'],                                         // remove formatting button
  ['better-table', 'file', 'emoji']                  // Fluent Editor added
]

const editor = new FluentEditor('#editor', {
  theme: 'snow',
  modules: {
    toolbar: toolbarOptions,
    syntax: true,          // 程式碼塊高亮
    file: true,            // 檔案上傳
    'emoji-toolbar': true, // 插入表情
  }
})

除了配置內建的工具欄，也支援擴充套件工具欄按鈕，具體擴充套件方式可以參考我之前寫的文章：

深入淺出 Quill 系列之實踐篇2：整個貪吃蛇遊戲到編輯器裡玩兒吧

或者參考 Quill 官方文件：https://quilljs.com/docs/modules/toolbar#handlers

3 配置內建模組

Fluent Editor 支援 11 種內建模組：

  1. clipboard 貼上版
  2. history 操作歷史
  3. keyboard 鍵盤事件
  4. syntax 語法高亮
  5. toolbar 工具欄
  6. uploader 檔案上傳
  7. formula 公式，依賴 katex 公式庫
  8. ⭐better-table 表格
  9. ⭐mention @提醒
  10. ⭐emoji-toolbar 插入表情
  11. ⭐file 附件上傳，配合 file format 一起使用，可以插入附件

透過 modules 配置模組，比如要啟用一個模組，可以設定該模組為 true。

const editor = new FluentEditor('#editor', {
  theme: 'snow',
  modules: {
    toolbar: toolbarOptions,
    syntax: true,          // 啟用程式碼塊高亮模組
    file: true,            // 啟用檔案上傳模組
    'emoji-toolbar': true, // 啟用插入表情模組
  }
})

還可以傳入一些配置項，定製模組的功能，比如：配置表格右鍵操作選單。

const editor = new FluentEditor('#editor', {
  theme: 'snow',
  modules: {
    toolbar: toolbarOptions,
    'better-table': {
      operationMenu: {
        color: {
          text: '主題色',
          colors: [
            '#ffffff', '#f2f2f2', '#dddddd', '#a6a6a6', '#666666', '#000000',
            '#c00000', '#ff0000', '#ffc8d3', '#ffc000', '#ffff00', '#fff4cb',
            '#92d050', '#00b050', '#dff3d2', '#00b0f0', '#0070c0', '#d4f1f5',
            '#002060', '#7030a0', '#7b69ee', '#1476ff', '#ec66ab', '#42b883',
          ]
        }
      }
    }
  }
})

更多使用方式可參考 Fluent Editor 和 Quill 文件：

  • Fluent Editor：https://opentiny.github.io/fluent-editor/docs/custom-toolbar
  • Quill：https://quilljs.com/docs/modules

4 配置 Quill 生態模組

Quill 是一個模組化的富文字，擁有很多外部生態模組，Fluent Editor 基於 Quill，和 Quill 擁有一樣的模組化能力，我們從以下 Quill 模組列表中選擇一個 Markdown 快捷鍵的模組：quill-markdown-shortcuts，配置到我們的 Fluent Editor 富文字中。

https://github.com/quilljs/awesome-quill

首先需要安裝 quill-markdown-shortcuts。

npm i quill-markdown-shortcuts

然後註冊這個模組：

import FluentEditor from '@opentiny/fluent-editor'

// 引入和註冊
import MarkdownShortcuts from 'quill-markdown-shortcuts'

FluentEditor.register('modules/markdownShortcuts', MarkdownShortcuts)

配置到 modules 中即可：

new FluentEditor('#editor', {
  theme: 'snow',
  modules: {
    markdownShortcuts: {} // 啟動 Markdown 快捷鍵模組
  }
})

這時我們在富文字編輯器中輸入 Markdown 語法的快捷鍵，比如：#，按空格鍵，會自動變成一級標題的格式。

效果如下：

除了配置現有模組之外，還支援擴充套件新模組，具體可以參考我之前寫的文章：

深入淺出 Quill 系列之原理篇1：現代富文字編輯器 Quill 的模組化機制

5 在多種前端框架中使用

Fluent Editor 是一個框架無關的富文字編輯器，可以在任意前端框架中使用。

比如在 Vue 中使用：

App.vue

<script setup lang="ts">
import { onMounted } from 'vue'
import FluentEditor from '@opentiny/fluent-editor'

onMounted(() => {
  new FluentEditor('#editor', {
    theme: 'snow'
  })
})
</script>

<template>
  <div id="editor"></div>
</template>

在 React 中使用：

App.tsx

import { useEffect } from 'react'
import FluentEditor from '@opentiny/fluent-editor'
import '@opentiny/fluent-editor/style.css'

function App() {
  useEffect(() => {
    new FluentEditor('#editor', {
      theme: 'snow'
    })
  })

  return (
    <div id="editor"></div>
  )
}

export default App

6 總結

本文主要從以下幾個部分給大家進行分享。

  • 先是帶大家快速上手使用 Fluent Editor 富文字
  • 然後是介紹開發中最常見的配置工具欄，共內建 27 種實用的工具欄按鈕
  • 再介紹 Fluent Editor 的 11 個內建模組，並重點介紹表格模組的配置
  • 由於 Fluent Editor 是相容 Quill 生態的，以 Markdown 快捷鍵的模組：quill-markdown-shortcuts 為例，介紹如何配置 Quill 生態模組
  • 最後介紹瞭如何在 Vue / React 框架中使用 Fluent Editor

更多用法請參考 Fluent Editor 官網：https://opentiny.github.io/fluent-editor/

由於 Fluent Editor 就是基於 Quill 進行封裝的，其實掌握 Quill 基本上就掌握了 Fluent Editor，歡迎大家關注我之前寫的《深入淺出 Quill》系列文章：

https://juejin.cn/column/7325707131678769152

聯絡我們

GitHub：https://github.com/opentiny/tiny-vue（歡迎 Star ⭐）

官網：https://opentiny.design/tiny-vue

B站：https://space.bilibili.com/15284299

個人部落格：https://kagol.github.io/blogs

小助手微信：opentiny-official

公眾號：OpenTiny

相關文章