【老曹前端插件推荐】富文本编辑器quill速成与它解决的问题

🧱 、富文本编辑器兼容性差被客户投诉怎么办？

❓ 一、遇到的问题：

• 用户粘贴 Word 内容时格式混乱
• 图片上传接口调用失败
• 富文本内容 XSS 安全问题

✅ 解决方案：

1. 选择成熟富文本库
   • 推荐使用：Quill / TinyMCE / WangEditor
   • Vue3 兼容性好，支持插件扩展
2. 处理粘贴内容

   // 使用 DOMPurify 清理 HTML 标签
   import DOMPurify from 'dompurify'
   const cleanHTML = DOMPurify.sanitize(dirtyHTML)
   

3. 图片上传拦截器

   quill.getModule('toolbar').addHandler('image', () => {
        
        
     const input = document.createElement('input')
     input.type = 'file'
     input.accept = 'image/*'
     input.onchange = async () => {
        
        
       const file = input.files[0]
       const url = await uploadImage(file)
       const range = quill.getSelection()
       quill.insertEmbed(range.index, 'image', url)
     }
     input.click()
   })
   

✅ 二、Quill 富文本编辑器快速上手教程

Quill 是一个轻量级、模块化的富文本编辑器，支持高度自定义和扩展。以下是快速上手 Quill 的核心步骤和示例代码。

---

1. 安装 Quill

通过 npm 或直接引入 CDN：

# npm 安装
npm install quill

# 或 CDN 引入（HTML 中）
<link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.7/quill.js"></script>

---

2. 基本使用

HTML 结构

<div id="editor-container"></div>

JavaScript 初始化

import Quill from 'quill';
import 'quill/dist/quill.snow.css'; // 引入默认样式

// 初始化 Quill 实例
const quill = new Quill('#editor-container', {
   
   
  theme: 'snow', // 使用默认主题（'snow' 或 'bubble'）
  placeholder: '请输入内容...',
  modules: {
   
   
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'], // 文本样式
      ['blockquote', 'code-block'], // 块级元素
      [{
   
    'header': 1 }, {
   
    'header': 2 }], // 标题
      [{
   
    'list': 'ordered' }, {
   
    'list': 'bullet' }], // 列表
      [{
   
    'script': 'sub' }, {
   
    'script': 'super' }], // 上标/下标
      [{
   
    'indent': '-1' }, {
   
    'indent': '+1' }], // 缩进
      [{
   
    'direction': 'rtl' }], // 文本方向
      [{
   
    'size': ['small', false, 'large', 'huge'] }], // 字体大小
      [{
   
    'header': [1, 2, 3, 4, 5, 6, false] }], // 标题级别
      [{
   
    'color': [] }, {
   
    'background': [] }], // 字体颜色/背景色
      [{
   
    'font': [] }], // 字体类型
      [{
   
    'align': [] }], // 对齐方式
      ['clean'], // 清除格式
      ['link', 'image', 'video'] // 链接、图片、视频
    ]
  }
});

---

3. 核心功能

获取/设置内容

// 获取 HTML 内容
const htmlContent = quill.root.innerHTML;

// 获取 Delta 格式（Quill 专用格式，适合保存到数据库）
const deltaContent = quill.getContents();

// 设置内容
quill.setContents([
  {
   
    insert: 'Hello, ' },
  {
   
    insert: 'World!', attributes: {
   
    bold: true } }
]);

// 或直接设置 HTML（需解析）
quill.clipboard.dangerouslyPasteHTML('<p>Parsed HTML</p>');

监听内容变化

quill.on('text-change', (delta, oldDelta, source) => {
   
   
  console.log('内容变化:', delta);
});

插入内容

// 在光标位置插入文本
const range = quill.getSelection();
quill.insertText(range.index, '插入的文本');

// 插入图片
quill.insertEmbed(range.index, 'image', 'https://example.com/image.jpg');

---

4. 自定义工具栏按钮

示例：添加自定义按钮

const toolbar = quill.getModule('toolbar');
toolbar.addHandler('customButton', () => {
   
   
  alert('自定义按钮被点击！');
});

// 修改工具栏配置
const quill =