原子文本标记( 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错误是有问题的。如果将AtomicText印迹放置在文档的末尾，则无法将其附加到文档中。此外，将光标移动到位于末尾的AtomicText上将使编辑器变得模糊。

我也经历过一个类似的问题，一个脚注污点。这是一个包含sup的[\d+]标记，我们不希望编辑器修改脚注，但是我们希望它们能够无缝地移动光标。

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

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

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

希望这能有所帮助。

Answer 2

在blot (Value)函数中，添加以下内容：

node.setAttribute('contenteditable', false);