Vue-Quill-Editor在vue中的使用方式

官网：Vue-Quill-Editor
官网中的几个案例的代码戳这里查看

1. 安装vue-quill-editor

npm install vue-quill-editor -S

2. 安装quill

npm install quill -S

3. 引入

import { quillEditor } from 'vue-quill-editor' // 调用富文本编辑器
import 'quill/dist/quill.snow.css' // 富文本编辑器外部引用样式  三种样式三选一引入即可
//import 'quill/dist/quill.core.css'
//import 'quill/dist/quill.bubble.css'
import * as Quill from 'quill'; // 富文本基于quill

4. To use

<!-- template部分 -->
<quill-editor
    v-model="content"
    ref="myQuillEditor"
    :options="editorOption"
    @focus="onEditorFocus($event)"
    @blur="onEditorBlur($event)"
    @change="onEditorChange($event)">
</quill-editor>

<!-- js data部分 -->
editor: null,   // 富文本编辑器对象
content: `<p></p><p><br></p><ol></ol>`, // 富文本编辑器默认内容
editorOption: { //  富文本编辑器配置
    modules: {
        toolbar: '#toolbar'
    },
    theme: 'snow',
    placeholder: '请输入正文'
},

<!-- js mounted部分 -->
this.editor = this.$refs.myQuillEditor.quill;

<!-- js beforeDestroy部分 -->
this.editor = null;
delete this.editor;

<!-- js methods部分 -->
// 准备富文本编辑器
onEditorReady (editor) {},
// 富文本编辑器 失去焦点事件
onEditorBlur (editor) {},
// 富文本编辑器 获得焦点事件
onEditorFocus (editor) {},
// 富文本编辑器 内容改变事件
onEditorChange (editor) {},

<!-- js components部分 -->
components: {
    quillEditor
}

5. 如果想自定义工具栏：

<!-- template部分 -->
<div id="toolbar" slot="toolbar">
    <button class="ql-bold" title="加粗">Bold</button>
    <select class="ql-header" title="段落格式">
        <option selected>正文</option>
        <option value="2">标题1</option>
        <option value="3">标题2</option>
        <option value="4">标题3</option>
    </select>
    <button class="ql-list" value="ordered" title="有序列表"></button>
    <button class="ql-list" value="bullet" title="无序列表"></button>
    <select class="ql-color" value="color" title="字体颜色"></select>
    <span class="icon-pic custom-icon" title="图片" @click="insertImgClick($event)"></span>  <!-- 插入图片 -->
    <span class="icon-video custom-icon" title="视频" @click="insertImgClick($event)"></span>  <!-- 插入视频 -->
</div>
<input style="display: none;" type="file" id="insert_image" @change="fileInsert($event)">  <!-- 选择图片input -->
<input style="display: none;" type="file" id="insert_video" @change="fileInsert($event)">  <!-- 选择视频input -->

<!-- js methods部分 -->
// 富文本编辑器 点击插入图片或者视频
insertImgClick (e) {
    if (e.target.className.indexOf('icon-pic') != -1) {
        document.getElementById('insert_image').click();
    } else if (e.target.className.indexOf('icon-video') != -1) {
        document.getElementById('insert_video').click();
    }
},
// 富文本编辑器 点击插入图片或者视频上传并预览
fileInsert (e) {
    var oFile = e.target.files[0];
    if (typeof (oFile) === 'undefined') {
        return;
    }
    let sExtensionName = oFile.name.substring(oFile.name.lastIndexOf('.') + 1).toLowerCase();   // 文件扩展名
    let sfileType = ''; // 上传文件类型
    if (e.target.id == 'insert_image') {
        sfileType = 'image'
        if (sExtensionName !== 'png' && sExtensionName !== 'jpg' && sExtensionName !== 'jpeg') {
            alert('不支持该类型图片');
            return;
        }
    }
    if (e.target.id == 'insert_video') {
        sfileType = 'video';
        if (sExtensionName !== 'mp4' && sExtensionName !== 'avi' && sExtensionName !== 'mov') {
            alert('不支持该类型视频');
            return;
        }
        let maxSize = 100*1024*1024;    // 100MB
        if (oFile.size > maxSize) {
            alert('上传视频大小不能超过100MB');
            return;
        }
    }
    var reader = new FileReader();
    reader.readAsDataURL(oFile);
    reader.onloadend = () => {
        let formData = new FormData(); // 通过formdata上传
        formData.append('file', oFile);
        let sUrl = '';
        if (sfileType == 'image') {
            sUrl = 'Pic';
        }
        if (sfileType == 'video') {
            sUrl = 'Vie';
        }
        var url = this.api_config + '/dealerIndex/upload' + sUrl + '.htm';
        this.axios.post(url, formData, {
            headers: { 'Content-Type': 'multipart/form-data' }
        }).then((res) => {
            this.editor.insertEmbed(this.editor.selection.savedRange.index, sfileType, res.data.data);  // 这个方法用来手动插入dom到编辑器里
            let isAndroid = this.$is_android(); // 判断是ios还是android
            if (isAndroid) {
                $('video').removeAttr('controls');
                $('video').attr('x5-video-player-type', 'h5');
            }
            this.editor.setSelection(this.editor.selection.savedRange.index + 1);  // 这个方法可以获取光标位置
        }).catch((response) => {
            console.log('失败', response);
        })
    }
},

关于编辑器里面的一些操作可以到quill官方查看，用法和配置项的的介绍很详细，很好用

6. 如果想更好地操作插入的video，可以把iframe改成h5的video，通过下面这段代码：

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

// 源码中是import直接倒入，这里要用Quill.import引入
const BlockEmbed = Quill.import('blots/block/embed')
const Link = Quill.import('formats/link')

const ATTRIBUTES = ['height', 'width']

class Video extends BlockEmbed {
  static create (value) {
    const node = super.create(value)
    // 添加video标签所需的属性
    node.setAttribute('controls', 'controls')   // 控制播放器
    node.setAttribute('type', 'video/mp4')
    node.setAttribute('style', 'object-fit:fill;width: 100%;')
    node.setAttribute('preload', 'auto')    // auto - 当页面加载后载入整个视频  meta - 当页面加载后只载入元数据  none - 当页面加载后不载入视频
    node.setAttribute('webkit-playsinline', 'true') // 兼容ios 不全屏播放
    node.setAttribute('playsinline', 'true')
    node.setAttribute('x-webkit-airplay', 'allow')
    // node.setAttribute('x5-video-player-type', 'h5') // 启用H5播放器,是wechat安卓版特性
    node.setAttribute('x5-video-orientation', 'portraint') // 竖屏播放 声明了h5才能使用  播放器支付的方向，landscape横屏，portraint竖屏，默认值为竖屏
    node.setAttribute('x5-playsinline', 'true') // 兼容安卓 不全屏播放
    node.setAttribute('x5-video-player-fullscreen', 'true')    // 全屏设置，设置为 true 是防止横屏
    node.setAttribute('src', this.sanitize(value))
    return node
  }

  static formats (domNode) {
    return ATTRIBUTES.reduce((formats, attribute) => {
      if (domNode.hasAttribute(attribute)) {
        formats[attribute] = domNode.getAttribute(attribute)
      }
      return formats
    }, {})
  }

  static sanitize (url) {
    return Link.sanitize(url) // eslint-disable-line import/no-named-as-default-member
  }

  static value (domNode) {
    return domNode.getAttribute('src')
  }

  format (name, value) {
    if (ATTRIBUTES.indexOf(name) > -1) {
      if (value) {
        this.domNode.setAttribute(name, value)
      } else {
        this.domNode.removeAttribute(name)
      }
    } else {
      super.format(name, value)
    }
  }

  html () {
    const { video } = this.value()
    return `<a href="${video}">${video}</a>`
  }
}
Video.blotName = 'video' // 这里不用改，楼主不用iframe，直接替换掉原来，如果需要也可以保留原来的，这里用个新的blot
Video.className = 'ql-video'
Video.tagName = 'video' // 用video标签替换iframe

export default Video

然后再把它引入到有编辑器的那个文件里：

import Video from '../../plugins/video.js'; // 插入h5 video视频
Quill.register(Video, true);  // 注册video

顺便推荐下我的小说网站，欢迎收藏哟

虫鱼小说网

知秋小说网