Vue - 富文本编辑器的使用（vue-quill-editor）

富文本编辑器的使用（vue-quill-editor）

1. vue 安装 vue-quill-editor
   npm install vue-quill-editor --save

2. main.js中全局引入，注册为全局组件

   import VueQuillEditor from 'vue-quill-editor'
   //导入富文本编辑器对应的样式
   import 'quill/dist/quill.core.css'
   import 'quill/dist/quill.snow.css'
   import 'quill/dist/quill.bubble.css'
   //将富文本编辑器，注册为全局可用的组件
   Vue.use(VueQuillEditor)
   

3. 组件中使用

   <template>
     <div>
       <!-- 富文本编辑器组件 -->
       <quill-editor v-model="text"></quill-editor>
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         text: ''
       }
     }
   }
   </script>
   
   <style scoped>
   .ql-editor{
       min-height: 300px;
   }
   </style>