quill二次开发键盘事件阻止backspace,delete删除图片

做了个项目采用了从未使用过的quill途中遇到过很多坑。

为了好的体验,采用quill编辑器,为了尽量不破坏html结构,强制用户不能用backspace,delete删除图片,但是官方的键盘绑定事件确不能触发删除图片事件,自己修改键盘事件源码实现。

需要修改两个函数 handleDelete()与handleBackspace()

图片html结构

<p class="cms-image">
<button type="button">删除</button>
<img src="...">
<input type="text" value="请输入图片描述">
</p>


1.按下delete键后,handleDelete方法不能获取到img标签 只能获取到img的父标签p

if(line.domNode.classList.contains('cmf-image')){//这里只能获取到p标签判断它的className是否是图片
//evt.preventDefault();//如果要在listen方法中判断需要阻止默认动作 还需要按键判断
return false;
}


2.按下backspace 键后,handleBackspace方法可以直接获取到img标签

let [leaf,] = this.quill.getLeaf(range.index);
if(leaf.domNode.tagName=='IMG'){
return false;
}

quill禁用键盘删除图片,需要添加这两段代码。

有更好的解决方法欢迎留言指点。



Tags javascript 建站

留言(0)

评论