轻量级富文本编辑器wangEditor结合vue使用方法示例

下面是关于“轻量级富文本编辑器wangEditor结合vue使用方法示例”的完整攻略：

简介

wangEditor 是一个轻量级的基于javascript开发的富文本编辑器，使用方便、功能强大，适合于各种类型的Web项目。本文将讲解如何在vue项目中使用wangEditor.

安装 wangEditor 和 vue

首先需要在项目中安装wangEditor和vue，可以通过npm进行安装：

npm install wangeditor --save
npm install vue --save

安装完毕后，在项目中引入wangEditor和vue：

import Vue from 'vue'
import WangEditor from 'wangeditor'

在组件中使用 wangEditor

在vue的组件中可以使用wangEditor，我们可以在 vue 的 mounted 生命周期函数中初始化编辑器。

<template>
  <div>
    <div ref="editor" id="editor"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    let editor = new WangEditor(this.$refs.editor)

    // 配置编辑器相关选项
    editor.config.menus = ['bold', 'underline', 'italic', 'head', 'link', 'list', 'justify']
    editor.create()
  }
}
</script>

在上述示例代码中，我们在mounted生命周期函数中使用this.$refs.editor获取到我们在模板中定义的div节点。然后，我们实例化一个WangEditor对象，并配置了编辑器相关选项。最后，我们调用了editor.create()方法，使编辑器在文档加载完后进行初始化。

获取编辑器中的内容

编辑器初始化完毕，我们可以使用editor.txt.text()方法来获取编辑器中的纯文本内容，使用editor.txt.html()方法来获取编辑器中的html文本内容。

<template>
  <div>
    <div ref="editor" id="editor"></div>
    <p>纯文本内容：{{ content.text }}</p>
    <p>html文本内容：{{ content.html }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: {
        text: '',
        html: ''
      }
    }
  },
  mounted() {
    let _this = this;
    let editor = new WangEditor(this.$refs.editor)

    editor.config.menus = ['bold', 'underline', 'italic', 'head', 'link', 'list', 'justify']
    editor.onchange = function() {
      _this.content = {
        text: editor.txt.text(),
        html: editor.txt.html()
      }
    }
    editor.create()
  }
}
</script>

在上述示例代码中，我们通过监听editor的onchange事件，当编辑器内容发生改变时，我们可以使用editor.txt.text()和editor.txt.html()方法获取编辑器中的内容并保存到content对象中。然后，在模板中显示这些内容。

配置编辑器中的图片上传

默认情况下，wangEditor中并没有自带图片上传的功能，需要进行自定义配置来实现。这里我给出一个简单的示例来演示如何使用vue和wangEditor实现图片上传。

<template>
  <div>
    <div ref="editor" id="editor"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    let editor = new WangEditor(this.$refs.editor)
    let _this = this;

    editor.config.uploadImgServer = 'http://localhost:4000/upload' // 后端接口上传图片
    editor.config.uploadImgLimit = 5 // 上传图片数量限制
    editor.config.uploadImgHooks = {
      customInsert: function(insertImgFn, result, editor) {
        let imgUrl = result.data.url
        editor.cmd.do('insertHtml', `<img src="${imgUrl}" style="max-width:100%;"/>`)
      }
    }

    editor.create()

    // 图片上传
    editor.$txt.on('change keyup', function() {
      let imgs = _this.$refs.editor.querySelectorAll('img')
      if (imgs && imgs.length > 0) {
        for (let i = 0; i < imgs.length; i++) {
          if (imgs[i].hasAttribute('data-file-id')) {
            continue
          }
          imgs[i].setAttribute('data-file-id', i + 1)
          let formData = new FormData()
          formData.append('file', imgs[i].src)
          formData.append('id', `${i + 1}`)
          _this.uploadImg(formData) 
        }
      }
    })
  },

  methods: {
    uploadImg(formData) {
      let _this = this
      this.$axios.post('http://localhost:4000/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(resp => {
        let res = resp.data
        if (res.status === 0) {
          _this.$message({message: res.msg, type: 'success'})
          let img = _this.$refs.editor.querySelectorAll(`img[data-file-id="${res.fileId}"]`)
          if (img) {
            img[0].removeAttribute('data-file-id')
            img[0].src = res.data.url
          }
        } else {
          _this.$message({message: res.msg, type: 'error'})
        }
      })
    }
  }
}
</script>

在上述代码中，我们通过设置uploadImgServer配置项来实现图片上传，函数属性uploadImgHooks提供了自定义插入图片回调函数的接口，可以利用该函数将上传的图片解析后加入到编辑器中。可以根据需求来自定义这个函数实现插入图片的逻辑。

总结

至此，我们已经学习了如何使用wangEditor在vue项目中进行富文本编辑器的开发，并且实现了文本编辑器中插入图片的功能。wangEditor是一款比较好上手、提供了比较多扩展接口的富文本编辑器，使用方便，值得推荐。