vue-富文本编辑器

一、安装

npm install vue2-editor

二、引入

import { VueEditor } from "vue2-editor";

三、使用

<template>
  <div id="app">
    <vue-editor v-model="content"></vue-editor>
  </div>
</template>
 
<script>
import { VueEditor } from "vue2-editor";
 
export default {
  components: {
    VueEditor
  },
 
  data() {
    return {
      content: "<h1>Some initial content</h1>"
    };
  }
};
</script>

4、自定义上传

html:

  <vue-editor v-model="model.body" useCustomImageHandler @image-added="handleImageAdded" ></vue-editor>

js:

    //上传文本编辑器 图片
     async handleImageAdded(file, Editor, cursorLocation, resetUploader) {
      const formData = new FormData();//表单数据
      formData.append("file", file);//图片储存在file字段里（后台接收file字段数据）
      const res=await this.$http.post(`/upload`,formData) //上传成功后 后台返回本地url
      Editor.insertEmbed(cursorLocation, "image", res.data.url);//根据 你点击上传的位置，塞入img ，图片地址设置为本地Url
      resetUploader();
    }

效果图

最后

原作者地址：
https://www.npmjs.com/package/vue2-editor