Vue中使用富文本编辑器wangEditor(包括图片上传)

原创

于 2019-12-07 16:35:58 发布 · 1.2k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #富文本编辑器

本文介绍了在Vue项目中如何安装和使用wangEditor富文本编辑器，详细步骤包括通过npm安装编辑器，创建公共组件以及在父组件中调用。重点讲述了图片上传的处理逻辑，即图片上传到服务器后获取url，并利用insertImg函数将图片插入到编辑器中。此外，还提及了在新增、详情和编辑场景中富文本内容的管理方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.vue中安装wangEditor

使用npm安装：npm install wangeditor --save

2.创建公共组件

在components中创建editor文件

组件内容为：

<template lang="html"> 
  <div class="editor">
    <div ref="toolbar" class="toolbar">
    </div>
    <div ref="editor" class="text">
    </div>
  </div>
</template>

<script>
import E from 'wangeditor'
export default {
  name: 'Editorbar',
  data () {
    return {
      editor: null,
      info_: null
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    isClear: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    isClear (val) {
      // 触发清除文本域内容
      if (val) {
        this.editor.txt.clear()
        this.info_ = null
      }
    },
    value (val) {
      // 使用 v-model 时，设置初始值
      this.editor.txt.html(val)
    }
  },
  mounted () {
    th