vue rich text editor (reference)

The work involved in the project using rich text editor, and here I use Vue-Quill-Editor plugin implements a basic design with the function of the editor.

1. Download Vue-Quill-Editor

   npm install vue-quill-editor --save Installation vue-quill-editor plug-in.

2. Sign up using plug-ins

   Write the following code in main.js in:

   import VueQuillEditor from 'vue-quill-editor'
   Vue.use(VueQuillEditor)
   

3. Components used

   code show as below:

   <template>
     <div class="about">
       <quill-editor
         v-model="content"
         ref="myQuillEditor"
         :options="editorOption"
         @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
         @change="onEditorChange($event)">
       </quill-editor>
     </div>
   </template>
   
   <script>
   import { quillEditor } from 'vue-quill-editor'
   import 'quill/dist/quill.core.css'
   import 'quill/dist/quill.snow.css'
   import 'quill/dist/quill.bubble.css'
   export default {
     name: 'about',
     data () {
       return {
         content: null,
         editorOption: {}
       }
     },
     components: {
       quillEditor
     },
     methods: {
       onEditorReady (editor) {
         // 准备编辑器
         console.log('111')
       },
       onEditorBlur () {
         // 失去焦点事件
         console.log('111')
       },
       onEditorFocus () {
         // 获得焦点事件
         console.log('222')
       },
       onEditorChange () {
         // 内容改变事件
         console.log('333')
       }
     }
   }
   </script>
   

Results are as follows: