quill - Quill 中的原子文本印迹

Question

假设我想要一个 AtomicText类似于默认 Link 的印迹印迹但不可变，只能作为一个整体删除。进一步来说:

光标可以在AtomicText的字符之间.

可以选择 AtomicText 的部分内容.

删除AtomicText的至少一个字符导致删除整个AtomicText .

将字符添加到 AtomicText一旦创建就不可能了。既不是通过键盘事件，也不是通过复制和粘贴。

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

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

任何指针将不胜感激。

类似的问题/要求如下:

How to make non selectable embed custom format in quilljs

How to add a non editable tag to content in Quill editor

Quill Editor: Restricted Editing based on tags/classes

Answer 1

我的经验设置contenteditable false 是有问题的。如果您定位 AtomicText文件末尾的污点，您将无法附加到它。此外，将光标移动到 AtomicText放在最后会使编辑器模糊。

我在脚注印迹上遇到了类似的问题。这是一个 sup包含 [\d+] 的标签我们不希望编辑者修改脚注，但我们确实希望他们能够无缝地将光标移动通过它们。

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

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

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

希望这可以帮助。