前言：

在vue项目中，因为涉及到使用文本编辑器，

恰恰vue-quill-editor就是一个简单实用的富文本编辑器。

参考文档：vue中使用vue-quill-editor富文本编辑器，自定义toolbar修改工具栏options

实战：

1.安装

npm install vue-quill-editor --save

2.vue引入

在main.js中引入

 import  VueQuillEditor from 'vue-quill-editor'

 // require styles 引入样式

 import 'quill/dist/quill.core.css'

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

 import 'quill/dist/quill.bubble.css'

 Vue.use(VueQuillEditor)

3.使用

 <template>

         <quill-editor

       v-model="content"

       ref="myQuillEditor"

       :options="editorOption"

       @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"

       @change="onEditorChange($event)" class="quillEditor">

     </quill-editor>

 </template>

 <script>

     import { quillEditor } from 'vue-quill-editor'

     export default {

         name:'editor',

         data(){

             return {

                 content:null,

                 editorOption:{

                 }

             }

         },

         methods:{

             onEditorBlur(){//失去焦点事件

             },

             onEditorFocus(){//获得焦点事件

             },

             onEditorChange(){//内容改变事件

             }

         }

     }

 </script>

 <style scoped>

 .quillEditor{

     height: 550px;

 }

 </style>

巴特西

6.安装使用vue-quill-editor

前言：

实战：

1.安装

2.vue引入

3.使用

4.效果：

最新文章

热门文章