背景
使用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)
},
},
},
},