编辑区域的事件钩子

是什么

想要监听编辑区域的各种事件回调，如鼠标点击、keyup、粘贴、点击图片、点击链接、滚动等，不用自己写。编辑器内都有定义，并开放使用。

  1. // eventHooks 举例
  2. {
  3.     dropEvents: Function[]
  4.     clickEvents: Function[]
  5.     keyupEvents: Function[]
  6.     tabUpEvents: Function[] // tab 键（keyCode === ）Up 时
  7.     tabDownEvents: Function[] // tab 键（keyCode === 9）Down 时
  8.     enterUpEvents: Function[] // enter 键（keyCode === 13）up 时
  9.     deleteUpEvents: Function[] // 删除键（keyCode === 8）up 时
  10.     deleteDownEvents: Function[] // 删除键（keyCode === 8）down 时
  11.     pasteEvents: Function[] // 粘贴事件
  12.     linkClickEvents: Function[] // 点击链接事件
  13.     textScrollEvents: Function[] // 编辑区域滑动事件
  14.     toolbarClickEvents: Function[] // 菜单栏被点击
  15.     imgClickEvents: Function[] // 图片被点击事件
  16.     // 等等……
  17. }

所有 eventHooks 及其内部实现，可以参考源码。

如何使用

使用 eventHooks 非常简单，例如链接的 tooltip 源码中就有使用。定义一个函数，push 到相应的 eventHooks 就可以了。

  1. // function showLinkTooltip() { /* 显示 tooltip */ }
  2. // function hideLinkTooltip() { /* 隐藏 tooltip */ }
  4. // 点击链接元素是，显示 tooltip
  5. editor.txt.eventHooks.linkClickEvents.push(showLinkTooltip)
  7. // 点击其他地方，有键盘操作，或者滚动时，隐藏 tooltip
  8. editor.txt.eventHooks.clickEvents.push(hideLinkTooltip)
  9. editor.txt.eventHooks.keyupEvents.push(hideLinkTooltip)
  10. editor.txt.eventHooks.toolbarClickEvents.push(hideLinkTooltip)
  11. editor.txt.eventHooks.textScrollEvents.push(hideLinkTooltip)