vue2-editor - npmhttps://www.npmjs.com/package/vue2-editor

1. 安装所需包

npm install vue2-editor

2. 使用Vue2-editor

<template>
  <div id="app">
    <!-- 3、使用组件 -->
    <vue-editor v-model="content"></vue-editor>
  </div>
</template>

<script>
// 1、引用包
import { VueEditor } from "vue2-editor";

export default {
  // 2、添加组件
  components: {
    VueEditor
  },

  data() {
    return {
      content: "<h1>Some initial content</h1>"
    };
  }
};
</script>

效果预览：

 3. 上传图片

Vue2-editor默认将图片转成了base64编码，直接放在了页面里面。

• 好处：无需额外上传图片。
• 坏处：页面文件会非常大，因此还是需要额外做图片的上传。

 将代码修改为如下：

<template>
  <div id="app">
    <!--1、添加useCustomImageHandler和@image-added="handleImageAdded"-->
    <vue-editor
      id="editor"
      useCustomImageHandler
      @image-added="handleImageAdded"
      v-model="htmlForEditor"
    >
    </vue-editor>
  </div>
</template>

<script>
import { VueEditor } from "vue2-editor";

export default {
  components: {
    VueEditor
  },

  data() {
    return {
      htmlForEditor: ""
    };
  },

  methods: {
    // 2、添加handleImageAdded函数
    async handleImageAdded(file, Editor, cursorLocation, resetUploader) {
      const formData = new FormData(); //html自带的表单数据类
      formData.append("file", file); //file是文件对象，在服务端接收的字段名也是"file"

      const res=await this.$http.post('upload',formData) //发起请求

      //cursorLocation是光标位置，res.data.url是上传后的url地址
      Editor.insertEmbed(cursorLocation, "image", res.data.url)
      resetUploader() //重置文件上传器
    },
  }
};
</script>

参考文章：

技能学习：学习使用Node.js + Vue.js，开发前端全栈网站-10.vue的富文本编辑器（vue2-editor）_最强的森的博客-CSDN博客技能学习：学习使用Node.js + Vue.js，开发前端全栈网站-8.vue的富文本编辑器（vue2-editor）相关文章：技能学习：学习使用Node.js + Vue.js，开发前端全栈网站-1.工具和本地环境技能学习：学习使用Node.js + Vue.js，开发前端全栈网站-2.启动项目技能学习：学习使用Node.js + Vue.js，开发前端全栈网站-3.element-ui和路由的安装和使用技能学习：学习使用Node.js + Vue.js，开发前端全栈网站-4.使用axioshttps://blog.csdn.net/m0_51592186/article/details/116593708

vue2-editor使用简介_一行注释的博客-CSDN博客_vue2-editor首先引入npm install vue2-editor --save安装至项目中import{VueEditor}from"vue2-editor";注册组件components:{ VueEditor},传值与方法<vue-editor:customModules="customModulesForEditor":editorOptions=...https://blog.csdn.net/qq_37818095/article/details/102463042