将制表符字符插入SlateJS文本编辑器

Question

如何在SlateJS?中插入制表符

因此，插入 是一个制表符，但是，当将它作为文本插入时，它显示为文字字符 ，而不是带有制表符间距的文本。

// Don't work, inserts literal characters
const insertText = (editor, format) => {
    Editor.insertText(editor, ` ')
}

有什么简单的方法可以插入 并让Slatejs将其识别为html，而不是纯文本？

根据我的粗略理解，在插入html之前，我可能需要序列化和反序列化html。甚至可以插入包含间距的<pre> </pre>块。

Answer 1

我突然意识到我可以插入4个空格而不是制表符.虽然，这并不完美，但您必须备份4次，而不是像制表符这样的一次。

const insertText = (editor, format) => {
    Editor.insertText(editor, '    ')
}

还可以插入插入文本中的制表符空间字符(如本文中的选项卡 )，无法复制粘贴它们的制表符，从而将其转换为空格。似乎工作非常好，功能上是一个制表符空间。

Answer 2

可以使用unicode转换为string。您也可以使用水平选项卡	。https://www.w3.org/MarkUp/html3/specialchars.html

Editor.insertText(editor, '\u2003'.toString()) //  
Editor.insertText(editor, '\u0009'.toString()) // 	

如果你想把它包装成一个跨度(呈现为<span style={{whiteSpace: "pre"}}>&#9;</span> )，你可以用标记来完成。

renderLeaf={props => {
  const leafStyle = props.leaf.pre && {whiteSpace: "pre"}
  return <span style={leafStyle}>{children}</span>
}}

Editor.insertNodes(editor, {
  text: '\u0009'.toString(),
  pre: true
})