【Vue】quill-editor富文本编辑器组件的运用与修改配置使图片上传到服务器

前言：Vue的生态已经越来越繁荣，越来越多有趣好用的组件加入的生态中了。quill-editor富文本编辑器就是很好用的组件之一。

 

一、quill-editor的安装与使用

①、安装

npm install vue-quill-editor --save

 

②、引用组件

<template>
  <div id="Test">
    <quill-editor ref="myTextEditor"
              v-model="content">
    </quill-editor>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'

export default {
  components: {
    quillEditor
  },
  data () {
    return {
      content: '<h2>hello quill-editor</h2>',
    }
  }
}
</script>

<style>

</style>

像这样quill-editor组件就引用成功了。

 

③、关于样式乱了的问题

有许多朋友反映，像上面代码中引用quill-editor组件后，发现在页面中富文本编辑器没有样式。