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;
}
}
Comments
要发表评论,您必须先登录。