轻量级富文本编辑器Quill，保姆级教程，5分钟快速上手

关注我的公众号：【编程朝花夕拾】，可获取首发内容。

01 引言

之前一直用老牌的富文本编辑器KindEditor，前两天想看一下官网发现打不开了，于是就是想找一款新的流行的、好用的替代产品。一通寻找下来Quill活跃维护，star数亮眼。

02 简介

Quill 是一个轻量级、免费开源的富文本编辑器，官方文档：quilljs.com

特点

轻量级，性能好
API 简洁易用
文档完善，社区活跃
支持模块化定制

03 快速开始

3.1 引入 CDN

javascript 复制代码

<!-- 引入 Quill 样式 -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

<!-- 引入 Quill 脚本 -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

3.2 HTML 结构

html 复制代码

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

3.3 初始化 Quill

javascript 复制代码

var quill = new Quill('#editor', {
  theme: 'snow',
  placeholder: '请输入内容...'
});

3.4 效果

极简模式，就这么简单。

04 常用API

4.1 获取/设置内容

javascript 复制代码

// 获取 HTML 内容
var html = quill.root.innerHTML;

// 获取纯文本
var text = quill.getText();

// 设置内容（会覆盖原有内容）
quill.setContents([
  { insert: 'Hello ' },
  { insert: 'World', attributes: { bold: true } },
  { insert: '\n' }
]);

// 获取 Delta 格式（推荐）
var delta = quill.getContents();

// 清空内容
quill.setText('');

4.2 内容监听

javascript 复制代码

// 内容变化时触发
quill.on('text-change', function(delta, oldDelta, source) {
  if (source === 'user') {
    console.log('用户输入了内容');
    console.log('当前内容:', quill.getText());
  }
});

// 选择区变化时触发
quill.on('selection-change', function(range, oldRange, source) {
  console.log('选区变化:', range);
});

4.3 格式化操作

javascript 复制代码

// 格式化为粗体（选中区域或光标位置）
quill.format('bold', true);

// 取消粗体
quill.format('bold', false);

// 设置标题
quill.format('header', 2);

// 设置文字颜色
quill.format('color', '#ff0000');

// 获取光标位置的格式
var formats = quill.getFormat();
console.log(formats)

4.4 焦点与禁用

javascript 复制代码

// 获取焦点
quill.focus();

// 聚焦到指定位置
quill.setSelection(0, 5);

// 禁用编辑器
quill.disable();

// 启用编辑器
quill.enable();

05 常用配置

Quill是可以自定义菜单的。我们看一个丰富的菜单：

javascript 复制代码

var quill = new Quill('#editor', {
 theme: 'snow',
 placeholder: '请输入内容...',
 modules: {
	 toolbar: [
             // 文字格式
             // 标题
             [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
             // 加粗、斜体、下划线、删除线
             ['bold', 'italic', 'underline', 'strike'],
             // 文字颜色、背景色
             [{ 'color': [] }, { 'background': [] }],
             // 字体
             [{ 'font': [] }],
             // 字体大小
             [{ 'size': ['small', false, 'large', 'huge'] }],

             // 段落格式
             [{ 'align': [] }],
             // 缩进
             [{ 'indent': '-1' }, { 'indent': '+1' }],
             // 有序列表、无序列表
             [{ 'list': 'ordered' }, { 'list': 'bullet' }],
             // 引用、代码块
             ['blockquote', 'code-block'],

             // 插入元素
             ['link', 'image', 'video', 'formula'],

             // 工具
             ['clean'],
             ['undo', 'redo']
		 ]
	 }
 });

看看效果

06 图片上传处理

类似排版的功能是页面本身完成的，但是插入的视频、图片等需要与服务器交互的则需要配置。

javascript 复制代码

// 自定义图片处理
var toolbar = quill.getModule('toolbar');
toolbar.addHandler('image', function() {
  var input = document.createElement('input');
  input.setAttribute('type', 'file');
  input.setAttribute('accept', 'image/*');
  input.click();

  input.onchange = function() {
    var file = input.files[0];
    var formData = new FormData();
    formData.append('image', file);

    // 上传到服务器
    fetch('/upload', {
      method: 'POST',
      body: formData
    })
    .then(res => res.json())
    .then(data => {
      var range = quill.getSelection();
      quill.insertEmbed(range.index, 'image', data.url);
    });
  };
});

看看效果

我们可以的选择图片是发送了请求的。

07 常见问题

7.1 获取编辑器内容为空

javascript 复制代码

// 确保在页面加载完成后初始化
$(document).ready(function() {
  var quill = new Quill('#editor', { ... });
});

7.2 工具栏不显示

检查是否正确引入 quill.snow.css
确认模块配置正确

7.3 中文输入法问题

Quill 对中文输入支持较好
如遇问题可尝试升级版本