vue移动端富文本编辑器 vue-quill-editor

1、安装

npm install vue-quill-editor --save

2、使用

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

...

<quill-editor ref="myTextEditor"  
      :content="content"//内容对应的字段  
      :options = "editorOption"  
      @change="onEditorChange($event)">//内容改变事件  
</quill-editor> 

export default {  
   components: {  
        quillEditor  
   },
   data(){  
     content:""  
   },
   methods: { 
      onEditorChange({ editor, html, text }) {
      //富文本编辑器  文本改变时 设置字段值
      this.content = html  
   }  

3、兼容性问题

(1)、当项目中使用到fastclick.js 时需要注意ios的兼容问题，可能会造成ios端不能获取焦点不能输入内容

解决办法：

将fastclick.js单独引入到项目中，不使用npm，并修改fastclick.js中的FastClick.prototype.needsClick函数，同时在<quill-editor></quill-editor>上加上class=”needsclick”，fastclick.js的修改代码如下：

/**
     * 判断所有父级元素是否包含传入的className
     *
     * @param {string} className
     * @returns {boolean} 是否包含
     */
    FastClick.prototype.checkParentsHasClassName = function (target) {
        if (!target) {
            return false
        }

        if ((/\bneedsclick\b/).test(target.className)) {
            return true
        }

        if (target.parentElement) {
            return this.checkParentsHasClassName(target.parentElement)
        }

        return false
    }

    /**
     * Determine whether a given element requires a native click.
     *
     * @param {EventTarget|Element} target Target DOM element
     * @returns {boolean} Returns true if the element needs a native click
     */
    FastClick.prototype.needsClick = function (target) {
        // 如果父级元素的class包含needsclick 则忽略当前元素

        switch (target.nodeName.toLowerCase()) {

            // Don't send a synthetic click to disabled inputs (issue #62)
        case 'button':
        case 'select':
        case 'textarea':
            if (target.disabled) {
                return true
            }

            break
        case 'input':

                // File inputs need real clicks on iOS 6 due to a browser bug (issue #68)
            if ((deviceIsIOS && target.type === 'file') || target.disabled) {
                return true
            }

            break
        case 'label':
        case 'iframe': // iOS8 homescreen apps can prevent events bubbling into frames
        case 'video':
            return true
        }

        if ((/\bneedsclick\b/).test(target.className)) {
            // alert(target.nodeName, true)
            return true
        }

        if (this.checkParentsHasClassName(target)) {
            // alert(target.nodeName, true)
            return true
        }
        return false
    }

(2)、user-select造成的问题

解决办法：

将所有<quill-editor></quill-editor>标签下的元素的user-select重置，代码如下：

.needsclick{
	-webkit-touch-callout: text !important;
	-webkit-user-select: text !important;
	-khtml-user-select: text !important;
	-moz-user-select: text !important;
	-ms-user-select: text !important;

	* {
		-webkit-touch-callout: text !important;
		-webkit-user-select: text !important;
		-khtml-user-select: text !important;
		-moz-user-select: text !important;
		-ms-user-select: text !important;
	}
}