我正在参加「掘金·启航计划」
Slate 的事件处理
上一篇我们通过 Slate 实现了一个简单的富文本编辑器，有兴趣的小伙伴点击查看。本篇我们来聊一聊 Slate 的事件绑定。
从 onKeydown 事件开始
Slate 是十分强大的编辑器组件，当然，它也可以添加某些常见的事件绑定，比如监听键盘键入事件 onKeyDown：
<Editable
onKeyDown={(event) => {
console.log(event.key);
}}
/>
效果如下，我们可以看到，Slate 确实能够实时监听用户的键盘输入动作：
通常我们利用绑定事件做得最多的就是，改变用户的输入，替换默认的输出结果。比如，当用户输入 & 符号时，我们在富文本中将其替换为 and。
这里需要注意的是，event.preventDefault() 的作用，如果删除这段代码，那么当用户输入 & 符号时，系统会默认输出 &，此时结果显示为 &and，这并不是我们想要的，所以利用 preventDefault() 方法来阻止 & 的默认输出。
<Editable
onKeyDown={event => {
if (event.key === '&') {
// 阻止键盘的默认事件，即 & 符号的插入
event.preventDefault()
editor.insertText('and')
}
}}
/>
效果如下，当我们尝试输入 & 符号时，你就会看到 and 代替了它：
自定义事件
如果你引入的是 slate-react 的 Editable，那么除了 onKeyDown，它还支持其他事件的监听，比如复制 onCopy、粘连 onPaste、拖放 onDrop 等等...
在一些情况下，如果你想拓展或覆盖 Slate 编辑器的默认事件，你可以通过在 Editable 组件中添加自定义事件来实现。
你可以通过自定义事件的返回值来控制 Slate 是否要执行自身的默认事件程序：
import {Editable} from 'slate-react';
/**
实现自定义事件逻辑...
**/
function MyEditor() {
const onClick = event => {
// 当没有返回值，并且没有设置 preventDefault 和 stopPropagation 时，Slate 将执行自带的事件处理程序
};
const onDrop = event => {
// 如果返回 true，Slate 将认为该事件已被处理，不会执行自身的事件处理程序
return true;
};
const onDragStart = event => {
// 如果返回 false，Slate 会认为事件还未被处理，之后 Slate 将执行自身的事件处理程序
return false;
};
return (
<Editable
onClick={onClick}
onDrop={onDrop}
onDragStart={onDragStart}
/>
)
}
这个事件返回值机制有一点难理解，没事，我们举个例子你就明白了~
就拿 onDrop 事件来说，我们自定义该事件并返回 true 时，默认情况下，当图片拖放至富文本编辑器时，它会默认打开拖放的图片，效果如下：
当我们返回 false 时，也就是跳过 onDrop 本身的默认事件处理，这样就不会打开图片了，效果如下：
写在最后
事件处理机制的灵活性进一步增加了 Slate 的拓展性，当富文本编辑器趋于复杂时，我们就经常需要对富文本的一些常见事件进行改写、覆盖和拓展，这些机制使我们的开发便捷了许多。
