富文本编辑器的使用

1、安装

npm install vue-word-editor --save 

依赖 quill，axios，vue

2、引入

<script>
import VueEditor from "vue-word-editor";
import "quill/dist/quill.snow.css"

3、注册组件

components: {
  VueEditor
},

4、视频和图片的配置

data(){
  return {
      // 上传图片的配置
      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",
        uploadSuccess(res, insert){
          insert("http://localhost:3000" + res.data.url)
        }
      }
    }
  }
},

5、使用

 <VueEditor :config="config"/>

6、如何获取富文本的内容？

       

1、给组件添加ref属性

<VueEditor ref="vueEditor" :config="config" />

2、通过ref属性值获取内容

var content = this.$refs.vueEditor.editor.root.innerHTML;