如何在 CodeMirror 编辑器中添加 <span>？

Question

请不要使用jQuery！

我想在 CodeMirror 编辑器的正文中添加一个样式的跨度。这是为了邮件合并之类的应用程序，您可以在其中执行以下操作：（来自 Zapier）

我相信这可以通过使用CodeMirror的Widget是可能的，但我迷路了，以什么方向去。我发现类似的（虽然复杂得多）的东西的例子在这里。

我还尝试了tagify，它与我所追求的非常相似，但没有多行输入，这是必需的。

我所需要的只是添加和删除（通过标签后面的插入符号的退格键）这些跨度的能力，但似乎没有一个简单的解决方案。

此外，如果有一个方便的库或其他一些方向，我可以不涉及 CodeMirror 也可以。

Answer 1

CodeMirror 实际上非常适合这一点。

首先在文档中插入一些占位符，例如[[tag]]。

var lineNumber = 0;
var charNumber = 0;
var snippet = "[[tag]]"
editor.doc.replaceRange(snippet, {line:lineNumber, from: charNumber});

然后创建你的 DOM 元素，我推荐一个 span。

var htmlNode = document.createElement("span");
//Style and add what you like to the span

然后使用doc.markText该节点替换它。

editor.doc.markText({line: lineNumber,ch: charNumber}, {line: lineNumber,ch: charNumber + snippet.length}, {
   replacedWith: htmlNode
})