vue-quill-deitor

• 版本支持：支持 IE10+ 详情 点击

1. 安装

1. 下载（这里使用的版本为3.0.6）

npm install vue-quill-editor --save

2. 引入样式并注册(这里有局部注册和全局注册)

• 这里使用了局部注册

import 'quill/dist/quill.core.css'
//这里有两个主题可以选择性的安装，但是必须选择一个主题
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

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

export default {
  components: {
    quillEditor
  }
}

3. 继续将官网里里代码进行复制

<template>
  <!-- Two-way Data-Binding -->
  <quill-editor
    ref="myQuillEditor"
    v-model="content"
    :options="editorOption"
    @blur="onEditorBlur($event)"
    @focus="onEditorFocus($event)"
    @ready="onEditorReady($event)"
  />

  <!-- Or manually control the data synchronization -->
  <quill-editor
    :content="content"
    :options="editorOption"
    @change="onEditorChange($event)"
  />
</template>

<script>
  // 下面这三行代码选择性的引入
  import Quill from 'quill'
  import someModule from '../yourModulePath/someQuillModule.js'
  Quill.register('modules/someModule', someModule)
  
  export default {
    data () {
      return {
        content: '<h2>I am Example</h2>',
        editorOption: {
          // Some Quill options...
        }
      }
    },
    methods: {
      onEditorBlur(quill) {
        console.log('editor blur!', quill)
      },
      onEditorFocus(quill) {
        console.log('editor focus!', quill)
      },
      onEditorReady(quill) {
        console.log('editor ready!', quill)
      },
      onEditorChange({ quill, html, text }) {
        console.log('editor change!', quill, html, text)
        this.content = html
      }
    },
    computed: {
      editor() {
        return this.$refs.myQuillEditor.quill
      }
    },
    mounted() {
      console.log('this is current quill instance object', this.editor)
    }
  }
</script>

• 当我们把上面的代码全部复制到组件中，出现的效果如下
  
  他是一个响应式布局，宽度会随着窗口的大小而变化

2. 样式优化

你会发现他是没有高度的，我们可以通过调试得到相关的类名，给他一个高度。

• 需要注意的是，我们要给的样式，需要放在全局中，因为我们是从node_modules引入的，而我们当前的组件的样式之作用与当前组件下的div

1. 在App.vue的style标签中写上样式

.ql-container{
  height: 220px !important;
}

2. 再次观察富文本编辑器，就会发现他编辑区已经具有一定的高度了

3. 事件说明

这里有两种数据绑定的方式 详情点击 API文档

3.1 数据绑定方式一

html

<quill-editor :content="content" :options="editorOption" @change="onEditorChange($event)" />

js

    data() {
        return {
            content: "<h2>I am Example</h2>",
            editorOption: {
                // Some Quill options...
            }
        };
    },
    methods: {
	   editorChange({ quill, html, text }) {
          console.log(html)
          this.content = html;
        }
    },

常用API

API	Value
@change	当编辑器中的内容变动的时候就会触发事件
content	编辑器的内容区
options	编辑器的一些设置选项

3.2 数据绑定方式二

html

       <quill-editor
           ref="myQuillEditor"
           v-model="content"
           :options="editorOption"
           @blur="onEditorBlur($event)"
           @focus="onEditorFocus($event)"
           @ready="onEditorReady($event)"
       />

js

    methods: {
        onEditorBlur(quill) {
        },
        onEditorFocus(quill) {
        },
        onEditorReady(quill) {
        },
    },
    computed: {
	    editor() {
	        return this.$refs.myQuillEditor.quill;
	    }
	},

1. 使用v-model来双向绑定数据
2. 可以通过ref来获取编辑器的实例

API	Value
@blur	编辑器失去焦点时触发一次
@focus	编辑器获得焦点时触发一次
@ready	编辑器准备，在初始化加载的时候触发一次

4. options配置

具体的配置项请点击
常用配置项

API	Value
placeholder	编辑器失去焦点时触发一次
modules	包括工具栏的一些其他设置
readOnly	是否为只读
theme	主题的设置

5. 工具栏的设置

关于工具栏的设置 详情点击

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'
    }
  }

6. 汉化

• 将以下代码粘贴到全局样式中

	p {
	  margin: 10px;
	}
	
	.edit_container,
	.quill-editor {
	  height: 300px;
	}
	
	.ql-snow .ql-picker.ql-size .ql-picker-label::before,
	.ql-snow .ql-picker.ql-size .ql-picker-item::before {
	  content: "14px";
	}
	
	.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
	.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
	  content: "10px";
	}
	.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
	.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
	  content: "18px";
	}
	.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
	.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
	  content: "32px";
	}
	
	.ql-snow .ql-picker.ql-header .ql-picker-label::before,
	.ql-snow .ql-picker.ql-header .ql-picker-item::before {
	  content: "文本";
	}
	.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
	.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
	  content: "标题1";
	}
	.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
	.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
	  content: "标题2";
	}
	.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
	.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
	  content: "标题3";
	}
	.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
	.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
	  content: "标题4";
	}
	.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
	.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
	  content: "标题5";
	}
	.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
	.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
	  content: "标题6";
	}
	
	.ql-snow .ql-picker.ql-font .ql-picker-label::before,
	.ql-snow .ql-picker.ql-font .ql-picker-item::before {
	  content: "标准字体";
	}
	.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
	.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
	  content: "衬线字体";
	}
	.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
	.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
	  content: "等宽字体";
	}

7. 图片的拖拽上传

7.1 拖拽上传

图片的拖拽上传需要quill-image-drop-module插件,详情点击

下载

	npm install quill-image-drop-module -S

配置

	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'
	        }
	      }
	  }

将上面所有配置好后，你就会发现可以拖拽图片到固定的地方了

7.2 大小调整

需要下载插件quill-image-resize-module,详情点击

下载

npm install quill-image-resize-module -S

配置

	import Quill from 'quill';
	import { ImageResize } from 'quill-image-resize-module';
	
	Quill.register('modules/imageResize', ImageResize);
	
	const quill = new Quill(editor, {
	    // ...
	    modules: {
	        // ...
	        imageResize: {
	            // See optional "config" below
	        }
	    }
	});

当配置完之后，你会发现控制台报错Cannot read property 'imports' of undefined
解决办法

1. 打开vue.config.js,添加如下代码

const webpack = require('webpack')
module.exports = {
    chainWebpack: config => {
        config.plugin('provide').use(webpack.ProvidePlugin, [{
            'window.Quill': 'quill'
        }]);
    },
}