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

01 引言

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

02 简介

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

特点

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

03 快速开始

3.1 引入 CDN

<!-- 引入 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 结构

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

3.3 初始化 Quill

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

3.4 效果

极简模式，就这么简单。

04 常用API

4.1 获取/设置内容

// 获取 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 内容监听

// 内容变化时触发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 格式化操作

// 格式化为粗体（选中区域或光标位置）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 焦点与禁用

// 获取焦点quill.focus();// 聚焦到指定位置quill.setSelection(0, 5);// 禁用编辑器quill.disable();// 启用编辑器quill.enable();

05 常用配置

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

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 图片上传处理

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

// 自定义图片处理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 获取编辑器内容为空

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

7.2 工具栏不显示

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

7.3 中文输入法问题

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