Quill 中的原子文本印迹答案

【问题标题】：Atomic Text Blot in QuillQuill 中的原子文本印迹
【发布时间】：2018-05-19 00:35:20
【问题描述】：

假设我想要一个AtomicText 印迹，它类似于默认的Link 印迹，但它是不可变的，并且只能作为一个整体被删除。更具体地说：

光标可以在AtomicText的字符之间。
可以选择AtomicText的部分内容。
删除AtomicText 的至少一个字符会导致删除整个AtomicText。
AtomicText 创建后就不能再添加字符了。既不是通过键盘事件，也不是通过复制和粘贴。

我的想法是让 AtomicText 扩展自 Embed 印迹。在这种情况下，当光标位于其最后一个字符的右侧并按下退格键时，整个AtomicText 印迹将被删除。但其他操作无法按预期工作。我假设我需要重写一些 Blot 方法以实现正确的行为，但我在这里有点不知所措。

另一个想法是监听text-change 事件，确定光标是否在AtomicText 印迹内并采取相应措施。例如，按下退格键时，找到当前AtomicText 印迹的开始和结束位置，并删除这些索引之间的所有字符。这似乎是一种脆弱的方法。

任何指针将不胜感激。

类似的问题/要求如下：

【问题讨论】：

还有哪些操作没有按预期工作？
例如，我仍然可以将字符添加到 AtomicText 印迹。我进行了更多实验，并尝试为印迹定义中的节点设置 contentEditable=false。这没有用，但创建一个带有 contentEditable=false 的人工子节点更近了，但还不够近。似乎即使您从 Embed 继承但您的节点有文本，该文本也会像普通文本印迹一样处理，因此您仍然可以向其添加字符。
这是对 ProseMirror 的类似请求（“锁定节点”）：discuss.prosemirror.net/t/locked-nodes/448/1
如果你想阻止打字，你需要它是 contenteditable=false
我记得尝试过（见我上面的第二条评论）。但它会导致与光标位置的交互看似中断，并试图删除印迹。例如，我可以将光标放在印迹的中间，然后按退格键将光标放在印迹的开头。这就是为什么我认为我需要用自定义行为覆盖其他 Blot 方法但不明白如何正确地做到这一点。

标签： quill

【解决方案1】：

我的经验设置contenteditable false 是有问题的。如果您将AtomicText 标记放置在文档的末尾，您将无法附加到它。此外，将光标移动到位于末尾的AtomicText 上会使编辑器变得模糊。

我遇到了类似的脚注污点问题。这是一个包含[\d+] 的sup 标记，我们不希望编辑者修改脚注，但我们确实希望他们能够在它们之间无缝移动光标。

除了 OP 提到的 text-change 侦听器之外，我还尝试了其他两个选项。第一个选项是尝试使用selection-change 事件侦听器将光标（通过setSelection）定位在前面或后面。我发现这是有问题的，因为可以在选择更改事件触发之前偷偷输入字符。我也不喜欢这种方法，因为它会导致光标跳过脚注。 YMMV

另一种选择是拦截键盘输入。您可以在使用 quill 初始化的模块中添加键盘侦听器（我使用的是 KeyboardJS）。如果当前选择在您的原子文本的“内部”，您可以使用e.preventDefault() 阻止输入继续进行羽毛笔。使用这种方法，您还必须在您的 quill 配置中提供自定义键盘处理程序来覆盖选项卡、输入和可能的删除。选项卡更具挑战性，因为 quill 提供了一个默认选项卡处理程序，除非您覆盖它，否则该处理程序优先。在自定义处理程序中，您必须检测context 是否在您的AtomicText 中。 context 对象将包含一个 format 映射，如果它位于 AtomicText 的上下文中，则该映射包含 atomictext（您的印迹名称）。

请注意，如果用户将光标定位在您的 AtomicText 附近，那么从 quill 的角度来看，这是在 AtomicText 的上下文中。我们对输入问题的解决方案是插入一个零宽度的不间断空格，然后允许键盘输入继续进行。这会将光标从AtomicText 印迹中“打破”，从而允许插入按预期进行。然后，我们在保存文本之前从生成的 HTML 中去除这些字符。

希望这会有所帮助。

【讨论】：

【解决方案2】：

在印迹创建（值）函数中，添加：

node.setAttribute('contenteditable', false);

【讨论】：