vue+wangeditor动态添加/删除富文本功能实现及问题解决

最新推荐文章于 2025-10-10 14:21:11 发布

原创

最新推荐文章于 2025-10-10 14:21:11 发布 · 4.6k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了在Vue项目中使用WangEditor动态添加和删除富文本编辑器时遇到的问题及解决方法。在动态表单场景下，删除富文本编辑器后，下方富文本值出现错乱。解决思路是删除后重新创建富文本编辑器，并设置对应值，尽管此方法可能不优雅，但能实现功能。

vue+wangeditor动态添加/删除富文本功能实现及问题解决

前言： wangeditor是一个很好用的前端富文本编辑器，其功能强大，简单易上手让我这种前端小白简直爱不释手，然鹅在强大的工具或多或少都会有点小问题。今天就跟大家讲一下我在动态表单中使用它出现的问题以及最终的解决方法，有更好解决方法的大佬，欢迎不吝赐教。

说明：本次案例使用的是wangeditor V3，不同版本请自行参考其官网使用文档

V3官网基本用法说明： 1，安装：npm i wangeditor@3.1.1 ；
2，var E = require(‘wangeditor’) ；var editor = new E(’#editor’) ；editor.create()

本次案例要实现的功能UI如下，通过点击添加和删除按钮动态创建/删除表单元素和富文本编辑器，由于vue项目中使用的是ts，代码看起来有点不一样，但是本人也是ts小白，所以代码写的跟js基本一样，实现过程如下：

（UI图）
在这里插入图片描述
（实现代码）

private form = {
   
   
  chapterList: [
     {
   
   
       title: '',
       file: null,
       description: '',
       fileName: '',
       id: this.tempId
     }
   ]
 }
 
 private menus = [
   'head', 'bold', 'fontSize', 'fontName', 'italic',
   'underline', 'strikeThrough', 'foreColor', 'backColor',
   'link', 'list', 'justify', 'quote', 'emoticon', <

最低0.47元/天解锁文章