深入浅出 TinyEditor 富文本编辑器系列2：快速开始

你好，我是 Kagol，个人公众号：前端开源星球。

这是《深入浅出 TinyEditor 富文本编辑器系列》的第2篇，完整的系列文章：

深入浅出 TinyEditor 富文本编辑器系列1：TinyEditor 是什么

欢迎使用 TinyEditor - 一款基于 Quill 2.0 构建的强大富文本编辑器，提供了开箱即用的丰富模块和格式。本指南将帮助你快速高效地开始使用 TinyEditor。

架构概述

TinyEditor 采用模块化架构，通过自定义模块、格式和主题扩展了 Quill 的功能。核心结构包括：

安装

基础设置

使用 npm 安装 TinyEditor：

bash 复制代码

npm install @opentiny/fluent-editor

该包以 ES 模块形式提供，包含所有必要的依赖，包括作为基础的 Quill 2.0。

项目结构

基本用法

最小示例

创建一个具有最小配置的基础编辑器实例：

javascript 复制代码

import FluentEditor from '@opentiny/fluent-editor'
 
const editor = new FluentEditor('#editor', {
  theme: 'snow'
})

包含多个模块的示例

这是一个展示配置多个模块的综合设置：

javascript 复制代码

import FluentEditor, { CollaborationModule } from '@opentiny/fluent-editor'

// 引入协同编辑相关依赖
import * as Y from 'yjs'
import { Awareness } from 'y-protocols/awareness'
import { QuillBinding } from 'y-quill'
import { WebsocketProvider } from 'y-websocket'
import { IndexeddbPersistence } from 'y-indexeddb'
import QuillCursors from 'quill-cursors'

// 注册协同编辑模块
FluentEditor.register(
  'modules/collaborative-editing',
  CollaborationModule,
  true,
)

const editor = new FluentEditor('#editor', {
  theme: 'snow',
  modules: {
    toolbar: [
      [{ 'header': [1, 2, 3, false] }],
      ['bold', 'italic', 'underline', 'strike'],
      [{ 'color': [] }, { 'background': [] }],
      [{ 'list': 'ordered'}, { 'list': 'bullet' }],
      ['link', 'image', 'video'],
      ['clean']
    ],
    // 配置协同编辑模块
    'collaborative-editing': {
        deps: {
          Y,
          Awareness,
          QuillBinding,
          QuillCursors,
          WebsocketProvider,
          IndexeddbPersistence,
        },
        provider: {
          type: 'websocket',
          options: {
            serverUrl: 'wss://ai.opentiny.design/tiny-editor/',
            roomName: 'tiny-editor-document-demo-roomName',
          },
        },
        awareness: {
          state: {
            name: `userId:${Math.random().toString(36).substring(2, 15)}`,
            color: `rgb(${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)})`,
          },
        },
    },
    'mathlive': true, // 需要引入 mathlive 相关依赖
    'syntax': true // 需要引入 highlight.js 相关依赖
  }
})

详细配置请参考文档：opentiny.github.io/tiny-editor...

可用模块

TinyEditor 提供了丰富的预注册模块集：

模块	描述	用法
toolbar	带有自定义处理器的增强工具栏	`toolbar: { container: TOOLBAR_CONFIG }`
image	支持格式化的高级图片处理	`image: true`
collaborative-editing	实时协作	参见上面的协作示例
mathlive	LaTeX 数学公式	`mathlive: true`
syntax	代码语法高亮	`syntax: true`
emoji	表情选择器和支持	`emoji: true`
mention	@提及功能	`mention: true`

配置选项

编辑器接受扩展了 Quill 选项的综合配置对象：

选项	类型	默认值	描述
`modules`	`IEditorModules`	`{}`	模块配置
`scrollingContainer`	`HTMLElement` \| `string` \| `null`	`body`	自定义滚动容器
`autoProtocol`	`boolean` \| `string`	`false`	自动为链接添加协议
`editorPaste`	`any`	`undefined`	自定义粘贴处理
`screenshot`	`Partial<ScreenShotOptions>`	`undefined`	截图配置

快速开始模板

这是一个可用于快速原型设计的即用型 HTML 模板（可直接复制到 HTML 文件中运行）：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TinyEditor Quick Start</title>
  <style>
    #editor { 
      height: 400px; 
      border: 1px solid #ccc;
      padding: 10px;
    }
  </style>
  <!-- 引入 @opentiny/fluent-editor -->
  <script type="importmap">
    {
      "imports": {
        "@opentiny/fluent-editor": "https://unpkg.com/@opentiny/fluent-editor@3.18.3/index.es.js"
      }
    }
  </script>
  <!-- 引入 @opentiny/fluent-editor 样式 -->
  <link rel="stylesheet" href="https://unpkg.com/@opentiny/fluent-editor@3.18.3/style.css" />
</head>
<body>
  <div id="editor"></div>
  
  <script type="module">
    import FluentEditor from '@opentiny/fluent-editor'
    
    const editor = new FluentEditor('#editor', {
      theme: 'snow',
      modules: {
        toolbar: [
          ['bold', 'italic', 'underline'],
          [{ 'list': 'ordered'}, { 'list': 'bullet' }],
          ['link', 'image'],
          ['clean']
        ]
      }
    })
  </script>
</body>
</html>

效果图：

TinyEditor 类扩展了 Quill 的核心功能，同时保持与现有 Quill 配置的兼容性。这确保了现有 Quill 用户的平滑迁移路径，同时提供了对 TinyEditor 增强功能集的访问。

后续将全面介绍 TinyEditor 如何使用、设计架构、实现原理、二次开发等内容，点个关注，不迷路。

联系我们

GitHub：github.com/opentiny/ti...（欢迎 Star ⭐）

官网：opentiny.github.io/tiny-editor

个人博客：kagol.github.io/blogs/

小助手微信：opentiny-official

公众号：OpenTiny