Quill编辑器入门指南：5分钟搭建你的第一个富文本编辑器-优快云博客

Quill编辑器入门指南：5分钟搭建你的第一个富文本编辑器

【免费下载链接】quill Quill is a modern WYSIWYG editor built for compatibility and extensibility 项目地址: https://gitcode.com/gh_mirrors/qui/quill

为什么选择Quill？

你还在为寻找一款既简单易用又高度可定制的富文本编辑器（Rich Text Editor，富文本编辑器）而烦恼吗？在内容管理系统、博客平台、在线协作工具等场景中，一个高效的富文本编辑器是提升用户体验的核心组件。Quill作为一款现代化的开源编辑器，以其兼容性和可扩展性脱颖而出，完美平衡了易用性与高级功能。本文将带你5分钟内从零开始搭建第一个Quill编辑器，并掌握核心配置技巧。

读完本文你将获得：

3种快速安装Quill的方法（CDN/ npm/ 源码）
基础配置与主题切换指南
核心API与常用操作示例
常见问题解决方案

安装Quill：3种方式任选

方法1：CDN快速引入（推荐新手）

通过国内CDN（由jsDelivr提供加速）引入，无需构建工具，直接在HTML中添加以下代码：

<!-- 引入Quill核心JS -->
<script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.js"></script>
<!-- 引入Snow主题样式 -->
<link href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.snow.css" rel="stylesheet">

这种方式适合快速原型开发，支持两种构建版本：

完整构建：包含核心库+常用主题+格式+模块（推荐）
核心构建：仅包含基础功能，需手动添加所需模块

方法2：npm安装（适合生产环境）

# 安装最新稳定版
npm install quill@2

在JavaScript中导入：

import Quill from 'quill';
import 'quill/dist/quill.snow.css'; // 导入主题样式

方法3：源码编译

# 克隆仓库
git clone https://gitcode.com/gh_mirrors/qui/quill.git
cd quill

# 安装依赖
npm install

# 构建项目
npm run build

编译后的文件位于dist/目录，包含quill.js和主题样式表。

5分钟上手：你的第一个编辑器

基础示例（Snow主题）

创建index.html文件，复制以下代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Quill入门示例</title>
  <!-- 引入Snow主题样式 -->
  <link href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.snow.css" rel="stylesheet">
</head>
<body>
  <!-- 编辑器容器 -->
  <div id="editor" style="width: 800px; margin: 20px auto;">
    <h2>初始内容</h2>
    <p>这是一段带<strong>粗体</strong>的文本</p>
    <p><br></p>
  </div>

  <!-- 引入Quill库 -->
  <script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.js"></script>

  <!-- 初始化编辑器 -->
  <script>
    const editor = new Quill('#editor', {
      theme: 'snow',          // 使用Snow主题
      modules: {
        toolbar: [
          [{ 'header': [1, 2, false] }],  // 标题级别
          ['bold', 'italic', 'underline'], // 基础格式
          [{ 'list': 'ordered'}, { 'list': 'bullet' }], // 列表
          ['link', 'image'] // 链接和图片
        ]
      }
    });
  </script>
</body>
</html>

在浏览器中打开该文件，你将看到一个功能完备的富文本编辑器：

mermaid

主题切换

Quill提供两种官方主题：

Snow主题：现代简洁风格，包含完整工具栏（默认）
Bubble主题：轻量级悬浮工具栏，适合评论等场景

切换Bubble主题只需修改两处：

<!-- 引入Bubble主题样式 -->
<link href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.bubble.css" rel="stylesheet">

<script>
  const editor = new Quill('#editor', {
    theme: 'bubble'  // 修改主题配置
  });
</script>

核心配置与API

编辑器配置项（Options）

const editor = new Quill('#editor', {
  theme: 'snow',                // 主题
  modules: {                    // 模块配置
    toolbar: '#toolbar',        // 自定义工具栏选择器
    history: {                  // 历史记录配置
      delay: 1000,              // 保存间隔(ms)
      maxStack: 50              // 最大撤销步数
    }
  },
  placeholder: '开始编辑...',   // 占位文本
  readOnly: false,              // 是否只读
  scrollingContainer: null      // 滚动容器
});

常用API操作

// 获取编辑器内容（HTML格式）
const html = editor.root.innerHTML;

// 获取编辑器内容（Delta格式）
const delta = editor.getContents();

// 设置编辑器内容
editor.setContents(delta);

// 插入文本
editor.insertText(0, 'Hello World!', { bold: true });

// 监听内容变化
editor.on('text-change', (delta, oldContents, source) => {
  if (source !== 'user') return;  // 忽略程序触发的变更
  console.log('内容已更新');
});

Delta是Quill的文档格式，采用JSON结构描述内容变更：

{
  "ops": [
    { "insert": "Hello " },
    { "insert": "World", "attributes": { "bold": true } },
    { "insert": "!\n" }
  ]
}

自定义工具栏

通过HTML定义自定义工具栏：

<!-- 自定义工具栏 -->
<div id="toolbar">
  <button class="ql-bold">粗体</button>
  <button class="ql-italic">斜体</button>
  <select class="ql-header">
    <option value="1">标题1</option>
    <option value="2">标题2</option>
    <option value="">正文</option>
  </select>
</div>

<!-- 编辑器容器 -->
<div id="editor"></div>

<script>
  const editor = new Quill('#editor', {
    theme: 'snow',
    modules: {
      toolbar: '#toolbar'  // 关联自定义工具栏
    }
  });
</script>

工具栏按钮与格式对应关系：

按钮类名	功能描述
ql-bold	粗体
ql-italic	斜体
ql-underline	下划线
ql-header	标题级别
ql-list	列表（ordered/unordered）
ql-link	插入链接
ql-image	插入图片
ql-code	代码块

常见问题解决方案

问题1：编辑器高度自适应

/* 自定义编辑器高度 */
#editor .ql-editor {
  min-height: 300px;
  max-height: 600px;
  overflow-y: auto;
}

问题2：图片上传处理

editor.getModule('toolbar').addHandler('image', () => {
  const input = document.createElement('input');
  input.setAttribute('type', 'file');
  input.setAttribute('accept', 'image/*');
  
  input.onchange = () => {
    const file = input.files[0];
    // 这里添加图片上传逻辑
    const url = URL.createObjectURL(file); // 本地预览URL
    editor.insertEmbed(editor.getSelection().index, 'image', url);
  };
  
  input.click();
});

问题3：整合Vue/React框架

以Vue3为例：

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

<script setup>
import { ref, onMounted } from 'vue';
import Quill from 'quill';
import 'quill/dist/quill.snow.css';

const editorRef = ref(null);
let editor = null;

onMounted(() => {
  editor = new Quill(editorRef.value, {
    theme: 'snow'
  });
});
</script>

进阶学习路线

mermaid

总结

Quill凭借其简洁的API设计和强大的扩展性，成为富文本编辑领域的佼佼者。通过本文介绍的CDN引入方式，你已成功搭建基础编辑器；掌握主题切换、工具栏自定义和核心API后，可满足大多数业务场景需求。

下一步建议：

尝试实现图片上传功能
探索Delta格式进行内容协作
开发自定义模块扩展编辑器功能

立即动手改造你的编辑器，提升产品的内容创作体验吧！

提示：关注Quill官方更新，新版本可能包含性能优化和新功能。当前稳定版本为2.x，建议生产环境使用指定版本号引入，避免兼容性问题。

【免费下载链接】quill Quill is a modern WYSIWYG editor built for compatibility and extensibility 项目地址: https://gitcode.com/gh_mirrors/qui/quill

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

Quill编辑器入门指南：5分钟搭建你的第一个富文本编辑器