介绍：

vue富文本编辑器组件，是基于[@quil](https://quilljs.com/)新增图片上传和视频上传功能。

1. 使用

1.1 安装：

NPM

npm install vue-word-editor --save

  依赖 quill，axios，vue

1.2 引入：

1. import VueEditor from 'vue-word-editor';

2. import 'quill/dist/quill.snow.css'

1.3、注册和配置

1. 
   <script>
   //引入
   import VueEditor from "vue-word-editor";
   import "quill/dist/quill.snow.css"
   export default {
   name: 'app',
   data(){
   return {
   config: {
   // 上传图片的配置
   uploadImage: {
   url: "http://localhost:3000/upload",//文章上传到服务器端的处理路径
   name: "file",//后台所需要的参数的名称
   headers: this.getToken(),//设置请求头信息
   // res是结果，insert方法会把内容注入到编辑器中，res.data.url是资源地址
   uploadSuccess(res, insert){
   insert("http://localhost:3000" + res.data.url)//文件上传之后的回调，接收服务器响应回来的数据，根据服务器的地址进行填充
   }
   },
   // 上传视频的配置
   uploadVideo: {
   url: "http://localhost:3000/upload",
   name: "file",
   headers: this.getToken(),//设置请求头信息
   uploadSuccess(res, insert){
   insert("http://localhost:3000" + res.data.url)
   }
   }
   }
   }
   },
   //注册
   components: {
   VueEditor
   },
   // 设置上传头的信息
   methods：{
   getToken() {
   return {
   Authorization: JSON.parse(
   localStorage.getItem("hmtoutiao_houtai_login")
   ).token
   };
   }
   }
   </script>
   ————————————————
   版权声明：本文为CSDN博主「橘子y」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
   原文链接：https://blog.csdn.net/yupyuping/article/details/109524903

   1.4使用

<template>
<div id="app">
<VueEditor :config="config"/>
</div>
</template>

最后

以上就是现代枕头为你收集整理的vue-word-editor富文本框的基础使用介绍：1. 使用的全部内容，希望文章能够帮你解决vue-word-editor富文本框的基础使用介绍：1. 使用所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。