背景

使用vue-quill-editor 和 quil-mention 组件做pc端和手机端的富文本功能(具体使用可以看上一篇文章)。

目前遇到的问题如下：

1. ios 无法输入和获取焦点（必须要长按或者双击才可以，无法容忍）

2.提醒人无法筛选和输入中文问题

具体解决办法如下：

1. ios 无法输入和获取焦点（必须要长按或者双击才可以，无法容忍）

问题出现的原因是：生成了默认样式： -webkit-user-select:none;（无法选中，导致出现问题）

1）添加css样式

 /*** 富文本框 ***/
 .quill-editor{
  -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;
}

2）使用fastclick(使用组件，解决ios延迟点击的相应的问题)

① 安装fastclick组件

yarn add fastclick -D

② 添加class： needsclick

  <quill-editor
      ref="myQuillEditor"
      v-model="item.content"
      :options="item.editorOptions"
      class="needsclick"
      @change="$event => onEditorChange($event)"
/>

③ 因为使用了富文本,出现了这上面的toolbar点了之后只是亮了一下，就没反应了

出现原因如下： 富文本编辑的时候子元素下面是没有添加到needsclick这个类名

解决办法如下：把node_modules 里面的 fastclick.js 拿出来

修改fastclick.js: 添加这个checkParentHasClassName方法，递归调用

/**
 *  判断所有父级元素是否包含传入的className
 *
 */
  FastClick.prototype.checkParentHasClassName = function(target) {
    if(!target) {
      return false
    }
    if((/\bneedsclick\b/.test(target.className))) {
      return true
    }
    if(target.parentElement) {
      return this.checkParentHasClassName(target.parentElement)
    }
    return false
  }

修改 needsClick 这个方法

  FastClick.prototype.needsClick = function(target) {
    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)) {
      return true
    }
    if(this.checkParentHasClassName(target)) {
      return true
    }
    return false
  }

2.解决提醒人无法筛选和输入中文问题 

允许输入中文，在渲染函数添加筛选功能

 editorOptions: {
        modules: {
          toolbar: [
            ['bold','underline',{ color: [] },{ list: 'ordered' }, { list: 'bullet' 
}]],
          mention: {
            allowedChars: /^[\u4e00-\u9fa5a-zA-Z\d\s]*$/, // 允许输入中文和英文和特殊字符
            mentionDenotationChars: ['@'],
            offsetLeft: 4,
            source: (searchTerm, renderList, mentionChar) => {
              const values = this.userList // userList为自己的数据
              if (searchTerm.length === 0) {
                renderList(values, searchTerm)
              } else {
                const matches = [] // 添加筛选功能
                for (let i = 0; i < values.length; i++)
                { if (
                  ~values[i].value.indexOf(searchTerm)
                )
                { matches.push(values[i]) } }
                renderList(matches, searchTerm)
              }
            },
            onSelect:(data, insertItem) => { // 选中回调函数
              insertItem(data)
              this.contentRemindUsers.push(data.id)
            },
          },
        },
      },