vue 使用quill-editor编辑器

1.安装

npm install vue - quill - editor -- save

2.引入

import VueQuillEditor from 'vue-quill-editor'

Vue . use (VueQuillEditor) ;

3.使用

ref= "myTextEditor"

v-model= "meetingForm.summary"

:options= "editorOption"

@change="onEditorOption($event)"  //内容改变事件

class= "summary-quill-editor" >

editorOption: {
    modules:{
        toolbar: [
            ['bold', 'italic','underline', 'strike'],
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
            ['image','link']
        ]
    }
},

//修改编辑器文字提示
quillTitle(type){  //0 简介，1联系人介绍
    let quillEditorTitle = [
        {selector:'.ql-bold',title:'加粗'},
        {selector:'.ql-italic',title:'倾斜'},
        {selector:'.ql-underline',title:'下划线'},
        {selector:'.ql-header',title:'段落格式'},
        {selector:'.ql-strike',title:'删除线'},
        {selector:'.ql-size',title:'字号'},
        {selector:'.ql-list[value="ordered"]',title:'有序列表'},
        {selector:'.ql-list[value="bullet"]',title:'无序列表'},
        {selector:'.ql-align',title:'对齐方式'},
        {selector:'.ql-color',title:'字体颜色'},
        {selector:'.ql-background',title:'背景颜色'},
        {selector:'.ql-image',title:'图片'},
        {selector:'.ql-link',title:'超链接'},
        {selector:'.ql-clean',title:'清除格式'},
        {selector:'.ql-indent[value="-1"]',title:'向左缩进'},
        {selector:'.ql-indent[value="+1"]',title:'向右缩进'},
        {selector:'.ql-header .ql-picker-item[data-value="1"]',title:'标题一'},
        {selector:'.ql-header .ql-picker-item[data-value="2"]',title:'标题二'},
        {selector:'.ql-header .ql-picker-item[data-value="3"]',title:'标题三'},
        {selector:'.ql-header .ql-picker-item[data-value="4"]',title:'标题四'},
        {selector:'.ql-header .ql-picker-item[data-value="5"]',title:'标题五'},
        {selector:'.ql-header .ql-picker-item[data-value="6"]',title:'标题六'},
        {selector:'.ql-header .ql-picker-item:last-child',title:'标准'},
        {selector:'.ql-size .ql-picker-item[data-value="small"]',title:'小号'},
        {selector:'.ql-size .ql-picker-item[data-value="large"]',title:'大号'},
        {selector:'.ql-size .ql-picker-item[data-value="huge"]',title:'超大号'},
        {selector:'.ql-size .ql-picker-item:nth-child(2)',title:'标准'},
        {selector:'.ql-align .ql-picker-item:first-child',title:'居左对齐'},
        {selector:'.ql-align .ql-picker-item[data-value="center"]',title:'居中对齐'},
        {selector:'.ql-align .ql-picker-item[data-value="right"]',title:'居右对齐'},
        {selector:'.ql-align .ql-picker-item[data-value="justify"]',title:'两端对齐'}
    ];
    if(type == 0){
        document.getElementsByClassName('ql-editor')[0].dataset.placeholder = '请输入会议简介';
        for(let item of quillEditorTitle){
            let frag = document.querySelector('.quill-editor '+ item.selector);
            if (!frag) continue;
            frag.setAttribute('title',item.title);
        }
    }else {
        let qEList = document.querySelectorAll('.intro-quill-editor'),
            qELen = qEList.length;
        for(let i = 0;i;i++){
            let qlItem = qEList[i].querySelector('.ql-editor');
            if(qlItem.dataset.placeholder != '请输入联系人介绍'){
                qlItem.dataset.placeholder = '请输入联系人介绍';
                for(let item of quillEditorTitle){
                    let frag = qEList[i].querySelector('.quill-editor '+ item.selector);
                    if (!frag) continue;
                    frag.setAttribute('title',item.title);
                }
            }
        }
    }

},