vue-quill-editor富文本编辑器的汉化版 及 使用心得

现在网上上有很多的富文本编辑器，但我个人还是非常喜欢Vue家族的vue-quill-deitor，虽然说它只支持IE10+
好 , 废话不多说直接上代码，现在是见证奇迹的时刻, 在vue中使用quill呢，我们需要npm进行安装，安装命令如下：

第一步下载 :

npm i vue-quill-editor -D

第二步安装依赖 :

npm i quill -D

第三步全局引用

//在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)

也可局部引用

 //在对应文件中局部引入 :
 import { quillEditor } 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-quill-editor运行出来的效果

五 . 工具栏设置

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']    //上传图片、上传视频
 
       ]
     },
     theme:'snow'
    }
  }

六 . 图片拖拽上传
需要安装 quill-image-drop-module 模块，那么改一下imageDrop设置为true 就可以实现拖拽上传了.

import { quillEditor } from 'vue-quill-editor'
import * as Quill from 'quill' //引入编辑器
import { ImageDrop } from 'quill-image-drop-module';
Quill.register('modules/imageDrop', ImageDrop);
export default {
  name: 'App',
  data(){ 
     return{
        editorOption:{
          modules:{
            imageDrop:true, 
          },
          theme:'snow'
        }
      }
  }

七 .调整上传图片的大小

return{
    editorOption:{
     modules:{
　　　   imageResize: {}
       },
       theme:'snow'
        }
      }

八 . 使富文本编辑器汉化

现在我们来看下vue-quill-editor汉化后运行出来的效果

更多配置详解请移步至官方文档