vue-quill-editor富文本使用

一、准备css文件

用于自定义富文本样式(我的放到了assets/css/quillEditor)

.ql-snow .ql-picker {
    height: none !important;
}
/* 行高 */
.ql-picker-options {
    line-height: 1.5;
}
/* 标题 */
.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[data-value=SimHei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {
    content: "黑体";
    font-family: "SimHei";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before {
    content: "微软雅黑";
    font-family: "Microsoft YaHei";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {
    content: "楷体";
    font-family: "KaiTi";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=FangSong]::before {
    content: "仿宋";
    font-family: "FangSong";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Arial]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Arial]::before {
    content: "Arial";
    font-family: "Arial";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Times-New-Roman]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Times-New-Roman]::before {
    content: "Times New Roman";
    font-family: "Times New Roman";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=sans-serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=sans-serif]::before {
    content: "sans-serif";
    font-family: "sans-serif";
}

.ql-font-SimSun {
    font-family: "SimSun";
}

.ql-font-SimHei {
    font-family: "SimHei";
}

.ql-font-Microsoft-YaHei {
    font-family: "Microsoft YaHei";
}

.ql-font-KaiTi {
    font-family: "KaiTi";
}

.ql-font-FangSong {
    font-family: "FangSong";
}

.ql-font-Arial {
    font-family: "Arial";
}

.ql-font-Times-New-Roman {
    font-family: "Times New Roman";
}

.ql-font-sans-serif {
    font-family: "sans-serif";
}

/* 字号设置 */
/* 默认字号 */
.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="14px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
    content: "14px";
    font-size: 14px;
}

.ql-size-14px {
    font-size: 14px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
    content: "16px";
    font-size: 16px;
}

.ql-size-16px {
    font-size: 16px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
    content: "18px";
    font-size: 18px;
}

.ql-size-18px {
    font-size: 18px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
    content: "20px";
    font-size: 20px;
}

.ql-size-20px {
    font-size: 20px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before {
    content: "22px";
    font-size: 22px;
}

.ql-size-22px {
    font-size: 22px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before {
    content: "26px";
    font-size: 26px;
}

.ql-size-26px {
    font-size: 26px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before {
    content: "28px";
    font-size: 28px;
}

.ql-size-28px {
    font-size: 28px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="30px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="30px"]::before {
    content: "30px";
    font-size: 30px;
}

.ql-size-30px {
    font-size: 30px;
}

二.在页面里使用

<template>
	<div class="editor-box" style="line-height: 0;">
		<!-- 图片上传组件辅助-->
        <el-upload
            action="#"
            class="upload-img"
            v-show="false"
            :http-request="httpRequest">
        </el-upload>
 		<quill-editor
    		v-model="formObj.content"
    		ref="myQuillEditor"
    		:options="editorOption"
    		@blur="onEditorBlur($event)"
      		@focus="onEditorFocus($event)"
      		@change="onEditorChange($event)">
    	</quill-editor>
	</div> 
</template>
<script>
// 引入vue-quill-editor富文本
import { quillEditor } from 'vue-quill-editor'
// 引入vue-quill-editor富文本css样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 引入自定义富文本样式
import '@/assets/css/quillEditor.css'
// 将css注册到quill-editor中
import * as Quill from 'quill'

// 自定义鼠标停留按钮提示的交互
const titleConfig = {
    'ql-bold': '加粗',
    'ql-color': '颜色',
    'ql-font': '字体',
    'ql-code': '插入代码',
    'ql-italic': '斜体',
    'ql-link': '添加链接',
    'ql-background': '背景颜色',
    'ql-size': '字体大小',
    'ql-strike': '删除线',
    'ql-script': '上标/下标',
    'ql-underline': '下划线',
    'ql-blockquote': '引用',
    'ql-header': '标题',
    'ql-indent': '缩进',
    'ql-list': '列表',
    'ql-align': '文本对齐',
    'ql-direction': '文本方向',
    'ql-code-block': '代码块',
    'ql-formula': '公式',
    'ql-image': '图片',
    'ql-video': '视频',
    'ql-clean': '清除字体样式'
}
// 自定义的字体，注意下面的内容要和css里面对应上
var fonts = [
    'SimSun',
    'SimHei',
    'Microsoft-YaHei',
    'KaiTi',
    'FangSong',
    'Arial',
    'Times-New-Roman',
    'sans-serif'
]
// 自定义字号的大小，注意下面的内容要和css里面对应上
var sizes = [false, '16px', '18px', '20px', '22px', '26px', '28px', '30px']
//注册css自定义样式
var Size = Quill.import('formats/size')
Size.whitelist = sizes
var Font = Quill.import('formats/font')
Font.whitelist = fonts // 将字体加入到白名单
Quill.register(Font, true)

// 工具栏配置
const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
    ['blockquote', 'code-block'], // 引用  代码块-----['blockquote', 'code-block']
    [{ header: 1 }, { header: 2 }], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
    [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
    [{ script: 'sub' }, { script: 'super' }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
    [{ indent: '-1' }, { indent: '+1' }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
    [{ 'direction': 'rtl' }], // 文本方向-----[{'direction': 'rtl'}]
    [{ size: sizes }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
    [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
    [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
    [{ font: fonts }], // 字体种类-----[{ font: [] }]
    [{ align: [] }], // 对齐方式-----[{ align: [] }]
    ['clean'] // 清除文本格式-----['clean']
    ['link', 'image'] // 链接、图片、视频-----['link', 'image', 'video']
]

export default {
	//注册富文本组件
	components: { quillEditor },
	data () {
		formObj：{content:''}//富文本绑定的值
		//定义富文本组件功能
		editorOption: {
                placeholder: '您想说点什么？',
                theme: 'snow',
                modules: {
                    toolbar: {
                        container: toolbarOptions, // 工具栏
                        handlers: {
                            image: function (value) {
                                if (value) {
                                    // 调用element的图片上传组件
                                    document.querySelector('.upload-img input').click()
                                } else {
                                    this.quill.format('image', false)
                                }
                            }
                        }
                    }
                }
            }
	},
	mounted () {
        this.addQuillTitle()
    },
	methods: {
		onEditorBlur() {
	      //失去焦点事件
	    },
	    onEditorFocus() {
	      //获得焦点事件
	    },
	    onEditorChange() {
	      //内容改变事件
	      this.$emit("input", this.content);
	    },
	    // 图片格式转换为base64
	    getBase64 (file) {
            return new Promise((resolve, reject) => {
                const reader = new FileReader()
                reader.readAsDataURL(file)
                reader.onload = () => resolve(reader.result)
                reader.onerror = error => reject(error)
            })
        },
	    //上传图片，httpequest覆盖默认的上传行为，可以自定义上传的实现
	    async httpRequest ({ file }) {
            let img = await this.getBase64(file)
            // 调用后端给的接口上传图片
            getUploadFilesImg({ imgbase64: img }).then((res) => {
                // 获取富文本组件实例
                let quill = this.$refs.myQuillEditor.quill
                // 获取光标所在位置
                let length = quill.getSelection().index
                // 插入图片，res为服务器返回的图片链接地址
                quill.insertEmbed(length, 'image', res.path)
                // 调整光标到最后
                quill.setSelection(length + 1)
            }).catch((err) => {
                console.log(err)
            })
        }
		//定义鼠标停留按钮提示事件，在mounted里调用
		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]]
            })
        }
	}
}
</script>
<style lang="less" scoped>
// 定义富文本高度
/deep/ .ql-container.ql-snow{
    height: 400px;
}
</style>