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

Question

请不要使用 jQuery!

我想在 CodeMirror 编辑器的主体中添加样式化的跨度。这是为了邮件合并之类的应用程序，您可以在其中执行以下操作:(来自 Zapier)

我相信使用 CodeMirror Widget 这可能是可能的，但我不知道该往哪个方向走。我找到了一个类似的示例(尽管要复杂得多)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
})