Vue富文本编辑器 Vue-Quill-Editor的使用

Vue轻量级富文本编辑器 Vue-Quill-Editor

git仓库地址

使用步骤如下：

1. 下载安装 Vue-Quill-Editor 依赖包

   npm install vue-quill-editor --save
   

2. 在main.js 文件中引入并注册 Vue-Quill-Editor

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

3. 在组件中使用 Vue-Quill-Editor

   <template>
     <div>
       <quill-editor
         v-model="quillEditorText"
         :options="editorOption"
         @blur="onEditorBlur($event)"
         @focus="onEditorFocus($event)"
         @change="onEditorChange($event)"
       ></quill-editor>
     </div>
   </template>
   
   <script>
   // 引入样式文件
   import 'quill/dist/quill.core.css'
   import 'quill/dist/quill.snow.css'
   import 'quill/dist/quill.bubble.css'
   export default {
     name: 'QuillEditor',
     data () {
       return {
         quillEditorText: '',
         editorOption: {
           placeholder: '请输入文本',
           modules: {
             toolbar: [
               ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
               ['blockquote', 'code-block'], // 引用，代码块
               [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
               [{ list: 'ordered' }, { list: 'bullet' }], // 列表
               [{ script: 'sub' }, { script: 'super' }], // 上下标
               [{ indent: '-1' }, { indent: '+1' }], // 缩进
               [{ direction: 'rtl' }], // 文本方向
               [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
               [{ header: [1, 2, 3, 4, 5, 6, false] }], // 几级标题
               [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
               [{ font: [] }], // 字体
               [{ align: [] }], // 对齐方式
               ['clean'], // 清除字体样式
               ['image', 'video'] // 上传图片、上传视频
             ]
           }
         }
       }
     },
     methods: {
       onEditorBlur () { }, // 失去焦点事件
       onEditorFocus () { }, // 获得焦点事件
       onEditorChange () { } // 内容改变事件
     }
   }
   </script>
   

   文本编辑器效果：