富文本编辑器改造

package.json

@@ -13,6 +13,8 @@
  "dependencies": {
    "element-ui": "^2.15.1",
    "js-cookie": "^2.2.1",
    "quill": "^2.0.0-dev.3",
    "quill-better-table": "^1.2.10",
    "quill-image-resize-module": "^3.0.0",
    "vue": "^2.5.11",
    "vue-i18n": "^8.23.0",

src/components/Form/editOptions.js

@@ -1,53 +1,106 @@
import QuillBetterTable from 'quill-better-table'
console.log(QuillBetterTable.keyboardBindings)
const editorOption = {
    theme: 'snow',
    boundary: document.body,
    modules: {
        toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{
                'header': 1
            }, {
                'header': 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'],
            ['link', 'image', 'video']
        ]
        toolbar: { 
            container: [
                ['bold', 'italic', 'underline', 'strike'],
                ['blockquote', 'code-block'],
                [{
                    'header': 1
                }, {
                    'header': 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'],
                ['link', 'image', 'video', 'table'],
                // [
                //     { table: 'TD' },
                //     { 'table-insert-row': 'TIR' },
                //     { 'table-insert-column': 'TIC' },
                //     { 'table-delete-row': 'TDR' },
                //     { 'table-delete-column': 'TDC' }
                // ],
            ],
            handlers: {
                table: function (val) {
                    debugger
                    let tableModule = this.quill.getModule('better-table')
                    tableModule.insertTable(3, 3)
                },
                'table-insert-row': function () {
                  this.quill.getModule('table').insertRowBelow()
                },
                'table-insert-column': function () {
                  this.quill.getModule('table').insertColumnRight()
                },
                'table-delete-row': function () {
                  this.quill.getModule('table').deleteRow()
                },
                'table-delete-column': function () {
                  this.quill.getModule('table').deleteColumn()
                }
            }
        },
        imageResize: { //调整大小组件。
            displayStyles: {
                backgroundColor: 'black',
                border: 'none',
                color: 'white'
            },
            modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
        },
        // table: false,  // disable table module
        'better-table': {
            operationMenu: {
                items: {
                    unmergeCells: {
                        text: 'Another unmerge cells name'
                    }
                }
            }
        },
        
    },
    keyboard: {
        bindings: QuillBetterTable.keyboardBindings
    },
    placeholder: 'Insert text here ...',
    readOnly: false,

src/components/Form/form.vue

@@ -81,18 +81,14 @@
							</template>
							<el-input-number v-else-if="item.type=='inputNumber'" v-model="form[item.id]" :controls-position="item.controlsPosition||''" :placeholder="item.placeholder" :min="item.min||''" :max="item.max"></el-input-number>
							<template v-else-if="item.type=='richtext'">
								<quill-editor 
								<QuillEditor 
									ref="formQuillTextEditor"
									v-model="form[item.id]" 
									@blur="onEditorBlur($event, item)"
									@focus="onEditorFocus($event, item)"
									:options="resetEditorOption(item.editorOption)" 
									@ready="onEditorReady($event, item)"  
									@change="onEditorChange($event, item)">
								</quill-editor>
								<el-upload style="display:none"  :action="UploadUrl" :show-file-list="false" :before-upload='newEditorbeforeupload'  :on-success='newEditorSuccess'
									ref="uniqueId" id="uniqueId">
								</el-upload >
								</QuillEditor>
							</template>
						</template>
					</el-form-item>
@@ -104,56 +100,10 @@
</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import {quillEditor, Quill} from 'vue-quill-editor'
import { ImageResize } from 'quill-image-resize-module';
Quill.register('modules/imageResize', ImageResize);
import QuillEditor from '../QuillEditor'
import Upload from './Upload'
import {pickerOptions} from '../js/common'
import Tools from '../../utils/tool'
import defaultEditorOption from './editOptions'
let toolbarTooltips = {
	'font': '字体',
	'size': '字体大小',
	'header': '字体大小',
	'bold': '加粗',
	'italic': '斜体',
	'underline': '下划线',
	'strike': '删除线',
	'color' : '字体颜色',
	'background': '背景颜色',
	'script': {
		'sub' : 'Subscript',
		'super': 'Superscript'
	},
	'list': {
		'ordered':'Numbered list',
		'bullet': 'Bulleted list'
	},
	'indent': {
		'-1': '缩进-1',
		'+1':  '缩进+1'
	},
	'direction': {
		'rtl': 'Text direction (right to left | left to right)',
		'ltr': 'Text direction (left ro right | right to left)'
	},
	'align': '排列',
	'link': '插入超链接',
	'image': '插入图片',
	'video': '插入视频',
	'formula': 'Insert a formula',
	'clean': 'Clear format',
	'add-table': 'Add a new table',
	'table-row': 'Add a row to the selected table',
	'table-column': 'Add a column to the selected table',
	'remove-table': 'Remove selected table',
	'help': 'Show help'
};
export default {
	props: {
		fields: {},
@@ -162,7 +112,7 @@ export default {
	},
	components:{
		Upload,
		quillEditor
		QuillEditor
	},
	computed:{
		
@@ -171,8 +121,6 @@ export default {
		return {
			rows: "",
			pickerOptions,
			uploadLoading: false,
			UploadUrl: Tools.upload_stream_url
		}
	},
	created(){
@@ -216,99 +164,75 @@ export default {
		},
		//富文本编辑  新增 start
		resetEditorOption(editorOption){
			if(editorOption){
				return editorOption
			}
			return defaultEditorOption
		},
		onEditorBlur(editor) {
		// resetEditorOption(editorOption){
		// 	if(editorOption){
		// 		return editorOption
		// 	}
		// 	return defaultEditorOption
		// },
		onEditorBlur(editor, item) {
          	this.$emit('onEditorBlur', {editor, item})
		},
		onEditorFocus(editor) {
		onEditorFocus(editor, item) {
			this.$emit('onEditorFocus', {editor, item})
		},
		onEditorReady(editor) {
			this.showTooltips();
		onEditorReady(editor, item) {
			this.$emit('onEditorReady', {editor, item})
		},
		onEditorChange({editor, html, text}, item) {
			this.$emit('onEditorChange', {editor, html, text, item})
        },
        newEditorbeforeupload(file){                       
            var $uptypes = ["image/jpg", "image/png",'image/jpeg'];
            const isJPG = $uptypes.indexOf(file.type) > -1;
            const isLt3M = file.size / 1024 / 1024 < 3;
            this.uploadLoading = this.$loading({
                background: 'rgba(0, 0, 0, 0.2)',
                text: '上传中'
            })
            if (!isJPG) {
                this.uploadLoading.close()
                this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
            }
            if (!isLt3M) {
                this.uploadLoading.close()
                this.$message.error("上传头像图片大小不能超过 3MB!");
            }
            return isJPG && isLt3M;  
        // newEditorbeforeupload(file){                       
        //     var $uptypes = ["image/jpg", "image/png",'image/jpeg'];
        //     const isJPG = $uptypes.indexOf(file.type) > -1;
        //     const isLt3M = file.size / 1024 / 1024 < 3;
        //     this.uploadLoading = this.$loading({
        //         background: 'rgba(0, 0, 0, 0.2)',
        //         text: '上传中'
        //     })
        //     if (!isJPG) {
        //         this.uploadLoading.close()
        //         this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
        //     }
        //     if (!isLt3M) {
        //         this.uploadLoading.close()
        //         this.$message.error("上传头像图片大小不能超过 3MB!");
        //     }
        //     return isJPG && isLt3M;  
                                                              
        },
        newEditorSuccess(res, file, fileList){
			var vm = this
            if(res.status==200){ 
                var image = Tools.formatImgUrl(res.obj.fullUri),
                    addImgRange = this.$refs.formQuillTextEditor.quill.getSelection()
                var length = addImgRange.index,quill = vm.$refs.formQuillTextEditor.quill
                    quill.insertEmbed(addImgRange != null?length:0, 'image',image)
                    quill.setSelection(length + 1);
            }else{ 
                vm.$message.error("图片上传失败！"); 
            }
            if (this.uploadLoading) {
                this.uploadLoading.close()
            }
		},
		showTooltips(){
			let showTooltip = (which,el) => {
				if (which=='button'){
					var tool = el.className.replace('ql-', '');
				}
				else if (which=='span'){
					var tool = el.className.replace('ql-','');
					tool=tool.substr(0,tool.indexOf(' '));
				}
				if (tool){
					//if element has value attribute.. handling is different
					//buttons without value
					if (el.value ==''){
						if (toolbarTooltips[tool])
						el.setAttribute('title',toolbarTooltips[tool]);
					}
					//buttons with value
					else if (typeof el.value !=='undefined'){
						if (toolbarTooltips[tool][el.value])
						el.setAttribute('title',toolbarTooltips[tool][el.value]);
					}
					//default
					else
						el.setAttribute('title',toolbarTooltips[tool]);
				}
			};
			let toolbarElement = document.querySelector('.ql-toolbar');
			if (toolbarElement) {
				let matchesButtons = toolbarElement.querySelectorAll('button');
				for (let el of matchesButtons) {
					showTooltip('button',el);
				}
				//for submenus inside 
				let matchesSpans = toolbarElement.querySelectorAll('.ql-toolbar > span > span');
				for (let el of matchesSpans) {
					showTooltip('span',el);
				}
			}
		} 
        // },
        // newEditorSuccess(res, file, fileList){
		// 	var vm = this
        //     if(res.status==200){ 
        //         var image = Tools.formatImgUrl(res.obj.fullUri),
        //             addImgRange = this.$refs.formQuillTextEditor.quill.getSelection()
        //         var length = addImgRange.index,quill = vm.$refs.formQuillTextEditor.quill
        //             quill.insertEmbed(addImgRange != null?length:0, 'image',image)
        //             quill.setSelection(length + 1);
        //     }else{ 
        //         vm.$message.error("图片上传失败！"); 
        //     }
        //     if (this.uploadLoading) {
        //         this.uploadLoading.close()
        //     }
		// },
		// addQuillTitle () {
		// 	const oToolBar = document.querySelector('.ql-toolbar')
		// 	const aButton = oToolBar.querySelectorAll('button')
		// 	const aSelect = oToolBar.querySelectorAll('select')
		// 	aButton.forEach(function (item) {
		// 		if (item.className === 'ql-script') {
		// 		item.value === 'sub' ? (item.title = '下标') : (item.title = '上标')
		// 		} else if (item.className === 'ql-indent') {
		// 		item.value === '+1' ? (item.title = '向右缩进') : (item.title = '向左缩进')
		// 		} else {
		// 		item.title = titleConfig[item.classList[0]]
		// 		}
		// 	})
		// 	aSelect.forEach(function (item) {
		// 		item.parentNode.title = titleConfig[item.classList[0]]
		// 	})
		// },
		//富文本编辑  新增  end
	}
}

src/components/QuillEditor/editOptions.js

@@ -0,0 +1,149 @@
import QuillBetterTable from 'quill-better-table'
const editorOption = {
    theme: 'snow',
    boundary: document.body,
    modules: {
        toolbar: { 
            container: [
                ['bold', 'italic', 'underline', 'strike'],
                ['blockquote', 'code-block'],
                [{
                    'header': 1
                }, {
                    'header': 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'],
                ['link', 'image', 'video', 'table'],
                // [
                    // {'table': 'TD'},
                    // {'table-insert-row': 'TIR'},
                    // {'table-insert-column': 'TIC'},
                    // {'table-delete-row': 'TDR'},
                    // {'table-delete-column': 'TDC'}
                // ]
            ],
            handlers: {
                table: function (val) {
                    let tableModule = this.quill.getModule('better-table')
                    tableModule.insertTable(3, 3)
                },
                'table-insert-row': function () {
                  this.quill.getModule('table').insertRowBelow()
                },
                'table-insert-column': function () {
                  this.quill.getModule('table').insertColumnRight()
                },
                'table-delete-row': function () {
                  this.quill.getModule('table').deleteRow()
                },
                'table-delete-column': function () {
                  this.quill.getModule('table').deleteColumn()
                }
            }
        },
        imageResize: { //调整大小组件。
            displayStyles: {
                backgroundColor: 'black',
                border: 'none',
                color: 'white'
            },
            modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
        },
        // table: false,  // disable table module
        'better-table': {
            operationMenu: {
                items: {
                    unmergeCells: {
                        text: 'Another unmerge cells name'
                    }
                }
            }
        },
        
    },
    keyboard: {
        bindings: QuillBetterTable.keyboardBindings
    },
    placeholder: '请输入内容 ...',
    readOnly: false,
}
const toolbarTooltips = {
    'font': '字体',
    'size': '字体大小',
    'header': '字体大小',
    'bold': '加粗',
    'italic': '斜体',
    'underline': '下划线',
    'strike': '删除线',
    'color' : '字体颜色',
    'background': '背景颜色',
    'script': {
        'sub' : 'Subscript',
        'super': 'Superscript'
    },
    'list': {
        'ordered':'Numbered list',
        'bullet': 'Bulleted list'
    },
    'indent': {
        '-1': '缩进-1',
        '+1':  '缩进+1'
    },
    'direction': {
        'rtl': 'Text direction (right to left | left to right)',
        'ltr': 'Text direction (left ro right | right to left)'
    },
    'align': '排列',
    'link': '插入超链接',
    'image': '插入图片',
    'video': '插入视频',
    'formula': 'Insert a formula',
    'clean': 'Clear format',
    'add-table': 'Add a new table',
    'table-row': 'Add a row to the selected table',
    'table-column': 'Add a column to the selected table',
    'remove-table': 'Remove selected table',
    'help': 'Show help',
    'table': '插入表格'
};
export {
    toolbarTooltips,
    editorOption
}

src/components/QuillEditor/icon.js

@@ -0,0 +1,36 @@
export const ICON_SVGS = {
    'table-insert-row': `<svg viewbox="0 0 18 18">
            <g class="ql-fill ql-stroke ql-thin ql-transparent">
                <rect height="3" rx="0.5" ry="0.5" width="7" x="4.5" y="2.5"></rect>
                <rect height="3" rx="0.5" ry="0.5" width="7" x="4.5" y="12.5"></rect>
            </g>
            <rect class="ql-fill ql-stroke ql-thin" height="3" rx="0.5" ry="0.5" width="7" x="8.5" y="7.5"></rect>
            <polygon class="ql-fill ql-stroke ql-thin" points="4.5 11 2.5 9 4.5 7 4.5 11"></polygon>
            <line class="ql-stroke" x1="6" x2="4" y1="9" y2="9"></line>
        </svg>`,
    'table-insert-column': `<svg viewbox="0 0 18 18">
            <g class="ql-fill ql-transparent">
                <rect height="10" rx="1" ry="1" width="4" x="12" y="2"></rect>
                <rect height="10" rx="1" ry="1" width="4" x="2" y="2"></rect>
            </g>
            <path class="ql-fill" d="M11.354,4.146l-2-2a0.5,0.5,0,0,0-.707,0l-2,2A0.5,0.5,0,0,0,7,5H8V6a1,1,0,0,0,2,0V5h1A0.5,0.5,0,0,0,11.354,4.146Z"></path>
            <rect class="ql-fill" height="8" rx="1" ry="1" width="4" x="7" y="8"></rect>
        </svg>`,
    'table-delete-row': `<svg viewbox="0 0 18 18">
            <g class="ql-fill ql-stroke ql-thin ql-transparent">
                <rect height="3" rx="0.5" ry="0.5" width="7" x="4.5" y="2.5"></rect>
                <rect height="3" rx="0.5" ry="0.5" width="7" x="4.5" y="12.5"></rect>
            </g>
            <rect class="ql-fill ql-stroke ql-thin" height="3" rx="0.5" ry="0.5" width="7" x="8.5" y="7.5"></rect>
            <line class="ql-stroke ql-thin" x1="6.5" x2="3.5" y1="7.5" y2="10.5"></line>
            <line class="ql-stroke ql-thin" x1="3.5" x2="6.5" y1="7.5" y2="10.5"></line>
        </svg>`,
    'table-delete-column': `<svg viewbox="0 0 18 18">
            <g class="ql-fill ql-transparent">
                <rect height="10" rx="1" ry="1" width="4" x="2" y="6"></rect>
                <rect height="10" rx="1" ry="1" width="4" x="12" y="6"></rect>
            </g>
            <rect class="ql-fill" height="8" rx="1" ry="1" width="4" x="7" y="2"></rect>
            <path class="ql-fill" d="M9.707,13l1.146-1.146a0.5,0.5,0,0,0-.707-0.707L9,12.293,7.854,11.146a0.5,0.5,0,0,0-.707.707L8.293,13,7.146,14.146a0.5,0.5,0,1,0,.707.707L9,13.707l1.146,1.146a0.5,0.5,0,0,0,.707-0.707Z"></path>
        </svg>`
}

src/components/QuillEditor/index.vue

@@ -0,0 +1,236 @@
<template>
	<div class="custom-quill-editor-wrapper">
		<div class="custom-quill-editor"></div>
		<el-upload 
			style="display: none"
			:action="UploadUrl" 
			:show-file-list="false" 
			:before-upload='newEditorbeforeupload'  
			:on-success='newEditorSuccess'
			ref="upload" >
		</el-upload >
	</div>
</template>
<script>
// 引入原始组件
import Quill from 'quill'
// 引入核心样式和主题样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import {editorOption, toolbarTooltips} from './editOptions'
import Tools from '../../utils/tool'
import { ICON_SVGS } from './icon'
import _ from 'lodash'
import resizeImage from 'quill-image-resize-module';
Quill.register('modules/imageResize', resizeImage);
import QuillBetterTable from 'quill-better-table'
Quill.register({
	'modules/better-table': QuillBetterTable
}, true)
export default {
	name: 'CustomQuillEditor',
	props: {
		value: String,
		options: {}
	},
	data(){
		return {
			// 待初始化的编辑器
			quill: null,
			// 配置参数
			__options: '',
			uploadLoading: false,
			UploadUrl: Tools.upload_stream_url
		}
	},
	computed:{
		
	},
	watch: {
		'value' (val) {
			// 如果编辑器没有初始化，则停止赋值
			if (!this.quill) {
				return
			}
			// 获取编辑器当前内容
			let content = this.quill.root.innerHTML
			// 外部传入了新值，而且与当前编辑器的内容不一致
			if (val && val !== content) {
				// 将外部传入的HTML内容转换成编辑器识别的delta对象
				let delta = this.quill.clipboard.convert({
					html: val
				})
				// 编辑器的内容需要接收delta对象
				this.quill.setContents(delta)
			}
		}
	},
	created(){
		this.__options = this.options? this.options : editorOption
	},
	mounted() {
		this._initCustomToolbarIcon()
		this._initEditor()
	},
	methods: {
		 _initCustomToolbarIcon () {
			// 获取quill的原生图标库
			let icons = Quill.import('ui/icons')
			// 从自定义图标SVG列表中找到对应的图标填入到原生图标库中
			_.forEach(ICON_SVGS, (iconValue, iconName) => {
				icons[iconName] = iconValue
			})
		},
		// 初始化编辑器
		_initEditor () {
			// 获取编辑器的DOM容器
			let editorDom = this.$el.querySelector('.custom-quill-editor')
			// 初始化编辑器
			this.quill = new Quill(editorDom, this.__options)
			this.quill.getModule('toolbar').addHandler('image', ()=>{
				this.$refs.upload.$el.querySelector('.el-upload__input').click()
			})
			this.quill.getModule('toolbar').addHandler('video', this.uploadVideoHandler)
			// 双向绑定
			this.quill.on('text-change', () => {
				this.$emit('input', this.quill.root.innerHTML)
				// let html = this.$refs.editor.children[0].innerHTML
          		// this.$emit('change', { html, text, quill })
			})
			this.quill.on('selection-change', (range) => {
				if (!range) {
					this.$emit('blur', this.quill)
				} else {
					this.$emit('focus', this.quill)
				}
			})
			this.showTooltips()
			this.$emit('ready', this.quill)
		},
		newEditorbeforeupload(file){                       
            var $uptypes = ["image/jpg", "image/png",'image/jpeg'];
            const isJPG = $uptypes.indexOf(file.type) > -1;
            const isLt3M = file.size / 1024 / 1024 < 3;
            this.uploadLoading = this.$loading({
                background: 'rgba(0, 0, 0, 0.2)',
                text: '上传中'
            })
            if (!isJPG) {
                this.uploadLoading.close()
                this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
            }
            if (!isLt3M) {
                this.uploadLoading.close()
                this.$message.error("上传头像图片大小不能超过 3MB!");
            }
            return isJPG && isLt3M;  
                                                              
        },
        newEditorSuccess(res, file, fileList){
            if(res.status==200){ 
				var image = Tools.formatImgUrl(res.obj.fullUri),
					quill = this.quill,
					addImgRange = quill.getSelection(),
					length = addImgRange.index
					
                    quill.insertEmbed(addImgRange != null?length:0, 'image',image)
                    quill.setSelection(length + 1);
            }else{ 
                this.$message.error("图片上传失败！"); 
            }
            if (this.uploadLoading) {
                this.uploadLoading.close()
            }
		},
		showTooltips(){
			let showTooltip = (which,el) => {
				if (which=='button'){
					var tool = el.className.replace('ql-', '');
				}
				else if (which=='span'){
					var tool = el.className.replace('ql-','');
					tool=tool.substr(0,tool.indexOf(' '));
				}
				if (tool){
					//buttons without value
					if (el.value ==''){
						if (toolbarTooltips[tool])
						el.setAttribute('title',toolbarTooltips[tool]);
					}
					//buttons with value
					else if (typeof el.value !=='undefined'){
						if (toolbarTooltips[tool][el.value])
						el.setAttribute('title',toolbarTooltips[tool][el.value]);
					}
					//default
					else
						el.setAttribute('title',toolbarTooltips[tool]);
				}
			};
			let toolbarElement = document.querySelector('.ql-toolbar');
			if (toolbarElement) {
				let matchesButtons = toolbarElement.querySelectorAll('button');
				for (let el of matchesButtons) {
					showTooltip('button',el);
				}
				//for submenus inside 
				let matchesSpans = toolbarElement.querySelectorAll('.ql-toolbar > span > span');
				for (let el of matchesSpans) {
					showTooltip('span',el);
				}
			}
		} 
	}
}
</script>
<style lang="scss">
.custom-quill-editor-wrapper{
	.ql-snow .ql-picker-label::before{
		vertical-align: top;
	}
	.ql-snow .ql-color-picker .ql-picker-label svg, .ql-snow .ql-icon-picker .ql-picker-label svg{
		vertical-align: top;
	}
	// .custom-quill-editor{
	// 	flex-grow: 1;
	// 	display: flex;
	// 	flex-direction: column;
	// 	overflow: hidden;
	// 	.ql-toolbar,
	// 	.ql-formats {
	// 		.ql-picker-label{
	// 			&::before{
	// 				position: relative;
	// 				top: -5px;
	// 			}
	// 			button
	// 			i.icon{
	// 				font-size: 14px
	// 			}
	// 		}
	// 	}
	// 	.ql-container{
	// 		flex-grow: 1;
	// 		height: 0;
	// 		overflow: hidden;
	// 	}
		
	// }
}
</style>

webpack.config.js

@@ -73,9 +73,15 @@ module.exports = {
      {
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        loader: 'file-loader'
      }
      },
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      'window.Quill': 'quill/dist/quill.js',
      'Quill': 'quill/dist/quill.js'
    })
  ],
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',