vue整合wangEditor具体实例（包含图片上传和内容回显）

最新推荐文章于 2025-11-14 15:15:05 发布

原创

最新推荐文章于 2025-11-14 15:15:05 发布 · 3.9k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #css3

最近在写考试系统，需求是题目能够用富文本编辑。在现在的项目中已经用到Ueditor但是感觉太臃肿了，所以在网上看了几种在线编辑器，最终选择wangEditor（简约、大方适合现在的扁平化风格）。
话不多说直接上代码：
1.在自己项目的目录下使用cnpm下载wangEditor(我用的是淘宝镜像源所以是cnpm)

cnpm install wangeditor

2.新建一个wangEditor.vue的公共组件，在其中引入wangEditor

<template>
    <div class='clearfix'>
        <!-- 富文本编辑框 -->
        <div id="wangEditorElem" style="height:210px;background: #ffffff;"></div>
    </div>
</template>
<script>
import E from 'wangeditor'
export default {
   
   
  name: 'text',
  data () {
   
   
    return {
   
   
      wEditor: '',
      name: ''
    }
  },
  props: {
   
   
    content: {
   
   
      type: String
    }
  }, 
  // 用来回显内容（监控父组件中content变化）
  watch:{
   
   
    content:function (newVal,oldVal) {
   
   
        this.wEditor.txt.html(newVal)
    }
  },
  methods: {
   
   
    //获取编辑器中内容
    getContent