Vue 中使用富文本编译器wangEditor3的方法

下面我将为你介绍如何在Vue中使用wangEditor3富文本编辑器。

1. 安装wangEditor3

首先，在Vue项目中安装wangEditor3，可以使用npm或者yarn进行安装，打开终端输入以下命令：

npm install wangEditor3 --save

或者

yarn add wangEditor3

2. 创建富文本编辑器组件

在Vue项目中，可以创建一个名为Editor的组件，用于挂载富文本编辑器。以下是组件的基本代码：

<template>
  <div>
    <div ref="editorElem"></div>
    <button @click="getContent">获取内容</button>
  </div>
</template>

<script>
import wangEditor from 'wangeditor3'

export default {
  data() {
    return {
      editor: null // 编辑器实例
    }
  },
  mounted() {
    // 初始化编辑器
    this.editor = new wangEditor(this.$refs.editorElem)
    this.editor.create()
  },
  methods: {
    getContent() {
      // 输出富文本编辑器中的内容
      console.log(this.editor.txt.html())
    }
  }
}
</script>

在组件的模板中，首先添加一个div元素，用于挂载富文本编辑器。使用ref属性将该元素绑定到组件的data中。

在组件的mounted生命周期函数中，创建wangEditor实例，并传入挂载元素的引用。然后调用实例的create方法，初始化富文本编辑器。

在组件的methods中添加一个名为getContent的方法，用于获取富文本编辑器中的内容，并将其输出到控制台。

3. 使用富文本编辑器

在Vue项目中，可以引入上一节中创建的富文本编辑器组件，并将其作为页面的一部分进行使用。以下是一个例子：

<template>
  <div>
    <h1>使用wangEditor3编写富文本</h1>
    <editor></editor>
  </div>
</template>

<script>
import Editor from '@/components/Editor.vue'

export default {
  components: {
    Editor
  }
}
</script>

在页面的模板中，使用<editor>标签调用富文本编辑器组件。

4. 图片上传功能

可以通过wangEditor3的customUploadImg方法实现图片上传功能。该方法需要一个上传图片的接口地址和上传的文件对象，返回一个Promise对象。

以下是组件中添加图片上传功能的代码：

<template>
  <div>
    <div ref="editorElem"></div>
    <button @click="getContent">获取内容</button>
  </div>
</template>

<script>
import wangEditor from 'wangeditor3'

export default {
  data() {
    return {
      editor: null // 编辑器实例
    }
  },
  mounted() {
    // 初始化编辑器
    this.editor = new wangEditor(this.$refs.editorElem)
    this.editor.create()

    // 添加图片上传功能
    this.editor.customConfig.uploadImgServer = '/api/upload/image'
    this.editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024
    this.editor.customConfig.uploadImgHooks = {
      customInsert: (insertImg, result, editor) => {
        const url = result.data
        insertImg(url)
      }
    }
  },
  methods: {
    getContent() {
      // 输出富文本编辑器中的内容
      console.log(this.editor.txt.html())
    }
  }
}
</script>

在mounted生命周期函数中，添加以下代码：

this.editor.customConfig.uploadImgServer = '/api/upload/image'
this.editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024
this.editor.customConfig.uploadImgHooks = {
  customInsert: (insertImg, result, editor) => {
    const url = result.data
    insertImg(url)
  }
}

其中，uploadImgServer为上传图片的接口地址，uploadImgMaxSize为上传图片的最大尺寸，uploadImgHooks为上传图片的钩子。

钩子中的customInsert方法会在图片上传成功后被调用。该方法需要三个参数：insertImg方法用于在富文本编辑器中插入图片，result为上传成功后返回的结果，editor为编辑器实例。

以上是关于在Vue中使用wangEditor3的方法的详细攻略，希望能对你有所帮助。