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

Question

请不要使用jQuery！

我想在CodeMirror编辑器的主体内添加样式化的范围。这是出于类似于应用程序的邮件合并的目的，您可以在其中执行以下操作：（来自Zapier）

我相信使用CodeMirror窗口小部件可以实现此目的，但是我迷失了前进的方向。我找到了一个类似例子（尽管更为复杂）here。

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

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

另外，如果有一个方便的库或其他指示，我可以不涉及CodeMirror而行。

Answer 1

CodeMirror实际上非常适合于此。

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

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

然后创建您的DOM元素，我建议使用一个跨度。

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
})