Quill中的原子文字印迹

时间:2016-11-28 08:54:12

标签: quill

让我们说我希望有一个类似于默认AtomicText印迹的Link印迹,但它是不可变的,只能作为一个整体去除。更具体地说:

  • 光标可以位于AtomicText
  • 之间
  • 可以选择AtomicText
  • 的部分内容
  • 删除AtomicText的至少一个字符会导致删除整个AtomicText
  • 创建后,无法向AtomicText添加字符。无论是通过键盘事件还是通过复制和粘贴。

我的想法是让AtomicTextEmbed印迹延伸出来。在这种情况下,当光标位于其最后一个字符并按下退格键时,将删除整个AtomicText印迹。但其他操作无法按预期工作。我假设我需要覆盖一些Blot方法以实现正确的行为,但我在这里有点不知所措。

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

任何指针都会受到赞赏。

类似的问题/要求如下:

2 个答案:

答案 0 :(得分:3)

在印迹创建(值)功能中,添加:

plt.show()

答案 1 :(得分:2)

我设置contenteditable false的经验是有问题的。如果您将AtomicText印迹放在文档的末尾,则无法附加到文档的末尾。此外,将光标移动到位于末尾的AtomicText将使编辑器模糊。

我在脚注印迹中遇到了类似的问题。这是一个包含sup的{​​{1}}标记,我们不希望编辑修改脚注,但我们希望它们能够无缝地移动光标。

除了OP提到的[\d+]侦听器之外,我还尝试了其他两个选项。第一个选项是尝试使用text-change事件侦听器将光标(通过setSelection)放在前面或后面。我发现这是有问题的,因为在选择更改事件触发之前可以隐藏字符。我也不喜欢这种方法,因为它会导致光标跳过脚注。 YMMV

另一种选择是截取键盘输入。您可以在使用quill初始化的模块中添加键盘侦听器(我使用KeyboardJS)。如果当前选择位于原子文本的“内部”,则可以使用selection-change停止输入进入主轴。使用这种方法,您还必须在您的quill配置中提供自定义键盘处理程序,以覆盖选项卡,输入和可能删除。选项卡更具挑战性,因为除非您覆盖它,否则quill提供的默认选项卡处理程序优先。在自定义处理程序中,您必须检测e.preventDefault()是否在context范围内。 AtomicText对象将包含context地图,其中包含format(您的污点名称),如果它位于atomictext的上下文中。

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

希望这有帮助。