Editor.js如何实现监听输入自动应用内联工具效果

不需要依赖内联工具栏按钮触发，完全基于Editor.js开放的API配合原生事件监听即可实现所有需求，核心逻辑不涉及官方核心源码修改，适配所有可输入文本的块类型。

核心实现逻辑 #

整体流程分三层，所有操作都要走编辑器官方API，不要直接手动修改DOM，避免内部数据和视图不同步：

• 监听层：编辑器初始化完成后，在块切换、内容更新的回调中，给当前激活块的可编辑节点绑定input、keydown、keyup原生事件，不需要做全局事件委托，每次块重新渲染后补绑监听即可，避免动态生成的块节点丢失响应。
• 匹配层：每次输入事件触发时，通过window.getSelection()拿到当前光标位置，截取光标前的连续文本片段，用正则做规则匹配，匹配过程加300ms防抖，避免输入过程中频繁触发误判。
• 执行层：匹配命中对应规则后，根据场景做内容替换或者浮层唤起，操作完成后重置光标位置到插入内容末尾，继续监听后续输入。

分场景落地方式 #

• URL自动转可点击链接
  用标准URL正则匹配光标前的连续文本，当检测到用户输入空格、回车、标点等URL结束标识时，判定为完整URL输入完成。直接调用当前块的内联内容插入API，将匹配到的纯文本URL替换为带正确href属性的a标签，不需要唤起官方Link工具的工具栏。注意要在块的净化配置里给a标签的target、rel属性加白名单，避免保存时被过滤。

• @提及、#话题标签、:表情选择触发
  这三类逻辑一致：当正则匹配到光标前紧邻的触发字符（@/#/:）加后续连续输入的非空格字符时，先记录当前光标在视口中的坐标，在对应位置弹出自定义选择浮层，浮层内根据用户已输入的关键词过滤展示可选的用户列表、话题列表、表情列表即可。
  当用户选中浮层内的选项时，先删除当前已输入的触发字符+关键词片段，再调用内联插入API写入对应内容：提及插入带用户ID标识的mention节点、话题插入带话题ID的hashtag节点、表情直接插入表情字符或自定义表情节点，插入完成后关闭浮层。如果用户按ESC、输入空格或者删掉触发字符，直接隐藏浮层回到普通输入状态即可。

注意事项 #

• 所有自定义插入的特殊节点（提及、话题、自定义表情），都要在对应块的sanitize配置中添加标签和自定义属性的白名单，否则编辑器保存输出数据时会把自定义内容过滤掉。
• 做文本替换时要基于光标当前偏移量做局部替换，不要全量替换块内的整段文本，避免误改其他位置的相同内容。
• 如果需要适配代码块等不需要触发自动转换的块类型，可以在监听回调里判断当前块的类型，直接跳过匹配逻辑即可。

内容的提问来源于stack exchange，提问作者Fynn