Vue2 项目里该怎么选富文本编辑器？怎么避坑？

terry 8小时前阅读数 6 #Vue

在Vue2开发后台管理系统、内容创作平台这类项目时，富文本编辑器是绕不开的刚需——既要让用户轻松排版文字、插入图片表格，又得和Vue的响应式、组件化机制友好配合，但市面上编辑器五花八门，选哪个最适配？集成时容易踩哪些坑？自定义功能该从哪入手？今天把这些问题拆透，帮你少走弯路。

Vue2 生态里常用的富文本编辑器有哪些？各自适合啥场景？

Vue2生态中,主流富文本编辑器各有特色，得根据项目需求挑：

Quill + vue - quill - editor：Quill是轻量级编辑器，核心功能简洁，扩展性强但需自己折腾。vue - quill - editor是它的Vue2封装版，社区资源多，适合对体积敏感、需要深度定制功能的项目（比如做在线文档，要自定义协作逻辑）。
TinyMCE（Vue2封装版）：功能超级全，自带表格、代码块、表情等几十种插件，文档和生态成熟，但体积大、配置复杂，适合中后台“重型”排版场景（比如企业级CMS系统，需要Word级格式兼容）。
WangEditor（v3版本）：国产编辑器，文档全中文，API简单易上手，默认支持图片上传、拖拽排版，适合快速迭代的业务（比如运营活动页编辑器、内部公告系统），注意v5版本更偏向Vue3，Vue2项目优先选v3。
Slate - vue（小众但灵活）：基于Slate.js封装，完全自定义UI和逻辑，适合追求极致个性化的项目（比如做专属的富文本协作工具），但学习成本高，社区资源少。

简单说：功能简单选WangEditor，需要代码块/复杂格式选vue - quill - editor，企业级复杂排版选TinyMCE，深度定制选Quill/Slate - vue。

给Vue2项目快速集成富文本编辑器，步骤咋走？

以vue - quill - editor和WangEditor v3为例，看两种典型集成方式：

案例1：vue - quill - editor 快速集成

安装依赖：npm install vue - quill - editor quill --save（quill是核心库）。

全局注册：在main.js引入并注册：

import Vue from 'vue'
import VueQuillEditor from 'vue - quill - editor'
// 引入样式（按需选择，core.css是核心，theme可选snow/bubble）
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css' 
Vue.use(VueQuillEditor)

组件内使用：

<template>
<div>
 <quill - editor 
   v - model="content" 
   :options="editorOption" 
   @change="onEditorChange"
   ref="myQuill"
 ></quill - editor>
</div>
</template>
<script>
export default {
data() {
 return {
   content: '<p>初始内容</p>',
   editorOption: {
     theme: 'snow', // 可选snow（带工具栏）或bubble（极简）
     toolbar: [['bold', 'italic'], ['image', 'link']] // 自定义工具栏按钮
   }
 }
},
methods: {
 onEditorChange() {
   // 内容变化时触发，可同步数据到其他地方
   console.log('内容更新：', this.content)
 }
}
}
</script>

案例2：WangEditor v3 快速集成

WangEditor是“原生JS初始化”模式，适合局部组件使用：

安装依赖：npm install wangeditor@3.1.1 --save（指定v3版本）。

组件内初始化：

<template>
<div>
 <div id="editor - container"></div>
</div>
</template>
<script>
import E from 'wangeditor'
export default {
data() {
 return { editor: null, content: '' }
},
mounted() {
 // 初始化编辑器
 this.editor = new E('#editor - container')
 // 配置上传图片接口（替换成自己的后端地址）
 this.editor.customConfig.uploadImgServer = 'https://your - api/upload'
 // 内容变化时同步到data
 this.editor.customConfig.onchange = (html) => {
   this.content = html
 }
 this.editor.create() // 渲染到DOM
},
beforeDestroy() {
 // 销毁实例，避免内存泄漏
 this.editor.destroy()
}
}
</script>
<style scoped>
#editor - container { border: 1px solid #eee; min - height: 300px; }
</style>

Tips：集成时要注意生命周期——编辑器实例要在mounted（DOM渲染后）初始化，beforeDestroy时销毁实例（否则重复渲染会报错）。

想给编辑器加自定义按钮、改样式，咋操作？

富文本编辑器的“个性化”分两块：功能扩展（加按钮、改逻辑）和样式覆盖（改默认UI）。

自定义功能：以Quill加“上传图片”按钮为例

Quill的工具栏按钮可完全自定义,比如替换默认“本地选图”为“调接口上传”：

<quill - editor ref="myQuill" ...></quill - editor>
<script>
export default {
  mounted() {
    // 获取Quill的toolbar模块
    const toolbar = this.$refs.myQuill.quill.getModule('toolbar')
    // 自定义“uploadImage”按钮的点击逻辑
    toolbar.addHandler('uploadImage', () => {
      // 1. 触发文件选择框
      const input = document.createElement('input')
      input.type = 'file'
      input.accept = 'image/*'
      input.onchange = async (e) => {
        const file = e.target.files[0]
        // 2. 调后端接口上传（用axios封装）
        const res = await this.$axios.post('/upload - img', { file })
        // 3. 将返回的图片URL插入编辑器
        const quill = this.$refs.myQuill.quill
        const index = quill.getSelection().index // 获取光标位置
        quill.insertEmbed(index, 'image', res.data.url) // 插入图片
      }
      input.click() // 触发选择框
    })
  }
}
</script>

还要在editorOption.toolbar里配置按钮：

editorOption: {
  toolbar: [
    ['bold', 'italic'],
    [{ name: 'uploadImage', action: '上传图片', className: 'icon - upload' }]
  ]
}

样式覆盖：修改编辑器默认UI

编辑器的默认样式常和项目UI冲突（比如工具栏颜色、字体大小），以Quill为例，它的样式通过类名控制，需用/deep/（Vue2样式穿透）覆盖：

<style scoped>
/* 穿透scoped，修改Quill工具栏背景 */
/deep/ .quill - snow .ql - toolbar {
  background: #f5f7fa;
  border: none;
}
/* 修改编辑区域字体大小 */
/deep/ .ql - editor {
  font - size: 16px;
  line - height: 1.8;
}
</style>

WangEditor的样式同理,找到.w - e - toolbar、.w - e - text等类名，用穿透或全局样式覆盖。

Vue2 里用富文本编辑器，容易踩哪些坑？咋解决？

开发中常见“暗坑”，提前避坑能省大量调试时间：

坑1：图片上传跨域/鉴权失败

场景：编辑器调后端接口上传图片，报CORS错误，或因没带token被拦截。
解决：

后端开启CORS（设置Access - Control - Allow - Origin: *）；
前端给请求加token：比如Quill上传时，用axios拦截器统一加header；WangEditor则在customConfig.uploadImgHeaders里配置：
```
this.editor.customConfig.uploadImgHeaders = {
  'Authorization': 'Bearer ' + localStorage.getItem('token')
}
```

回显触发XSS攻击

场景：用户复制粘贴含<script>，存到数据库后前端渲染时执行恶意脚本。
解决：用DOMPurify过滤危险标签，安装npm install dompurify --save，提交前处理：

import DOMPurify from 'dompurify'前过滤
const safeContent = DOMPurify.clean(this.content)
axios.post('/save', { content: safeContent })

坑3：移动端输入卡顿、体验差

场景：在手机端打开编辑器，输入文字延迟高，甚至卡死。
原因：某些编辑器（如TinyMCE）体积大，移动端性能差。
解决：换更轻的编辑器（如WangEditor），或对重型编辑器做性能优化（比如延迟加载、禁用不必要插件）。

坑4：双向绑定延迟，v - model不同步

场景：编辑器内容变化，但Vue的data没及时更新。
原因：部分编辑器的change事件触发时机和Vue响应式不兼容。
解决：手动监听编辑器的change事件，强制同步数据，比如vue - quill - editor的@change事件，WangEditor的onchange回调，在事件里主动赋值this.content = 新内容。

坑5：内存泄漏，重复初始化报错

场景：路由切换后，编辑器实例没销毁，再次进入页面时重复初始化，控制台报错。
解决：在组件beforeDestroy钩子销毁实例：

vue - quill - editor：无需额外操作（封装层已处理）；
WangEditor/TinyMCE：调用this.editor.destroy()；

新手做Vue2项目，选哪个编辑器最友好？

新手优先选WangEditor v3或vue - quill - editor，原因：

WangEditor v3：
- 文档全中文,API像“搭积木”一样简单（比如new E(容器)就初始化，几行代码配上传）；
- 默认支持图片拖拽、粘贴上传，对国内场景（比如运营同学传截图）友好；
- 体积小,打包后对项目性能影响小。
vue - quill - editor：
- GitHub星数高（近3k），社区教程多，遇到问题能快速搜到解决方案；
- 基于Quill的扩展性,学会后能应对更复杂需求（比如自定义代码块样式、添加水印）；
- 官方封装了Vue组件,和Vue的v - model、生命周期天然兼容。

举个新手场景：做个人博客后台写文章，需要“标题+正文+代码块+图片”，选vue - quill - editor，配置toolbar包含['header', 'code - block', 'image']，半小时就能跑通核心功能；做公司内部通知系统，只要“加粗、列表、图片”，选WangEditor，10分钟就能集成上线。

富文本编辑器和Vue2表单结合，要注意啥？

在Element UI、Ant Design Vue等表单组件中，富文本需作为“自定义表单项”，要解决数据绑定和表单验证问题。

案例：Element UI Form 结合 vue - quill - editor

<template>
  <el - form :model="form" :rules="rules" ref="form">
    <!-- 富文本作为表单项 -->
    <el - form - item label="文章内容" prop="content">
      <quill - editor 
        v - model="form.content" 
        :options="editorOption"
        @change="handleContentChange"
      ></quill - editor>
    </el - form - item>
    <el - button @click="submitForm">提交</el - button>
  </el - form>
</template>
<script>
export default {
  data() {
    return {
      form: { content: '' },
      rules: {
        content: [
          { validator: (rule, value, callback) => {
            if (!value.trim()) return callback(new Error('内容不能为空'))
            // 还能校验长度：if (value.length < 10) ...
            callback()
          }, trigger: 'change' }
        ]
      },
      editorOption: { /* 配置 */ }
    }
  },
  methods: {
    handleContentChange() {
      // 内容变化时，手动触发表单验证
      this.$refs.form.validateField('content')
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 提交前过滤XSS（参考之前的DOMPurify方法）
          console.log('提交安全内容：', DOMPurify.clean(this.form.content))
        }
      })
    }
  }
}
</script>

关键点：

富文本不是原生<input>，需手动触发表单验证（通过validateField）；
自定义校验规则（如内容非空、长度限制），要在validator里写逻辑；
提交前必须过滤危险标签,避免XSS；

Vue2项目选富文本编辑器,核心是“需求匹配”——功能简单选WangEditor，需代码块/复杂格式选vue - quill - editor，企业级排版选TinyMCE；集成时盯紧生命周期和实例销毁；自定义功能要吃透编辑器API；避坑重点在图片上传、XSS、性能这些“暗雷”，把这些环节理清楚，富文本编辑器就能在Vue2项目里稳稳干活，帮你高效实现内容创作需求～

版权声明

本文仅代表作者观点，不代表Code前端网立场。
本文系作者Code前端网发表，如需转载，请注明页面地址。

上一篇：Vue2里父组件怎么调用子组件的方法？下一篇：Vue2里的export default到底是什么？怎么用才对？

发表评论:取消回复

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。