如何在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
})

How to add <span> within CodeMirror editor?