[英]How to add <span> within CodeMirror editor?
No jQuery please! 请不要jQuery!
I'd like to add a styled span within the body of a CodeMirror editor. 我想在CodeMirror编辑器的主体内添加样式化的范围。 This is for the purposes of a mail merge like application where you can for instance do: (From Zapier)
这是出于类似于应用程序的邮件合并的目的,您可以在其中执行以下操作:(来自Zapier)
I believe this may be possible using a CodeMirror Widget but I'm lost as to what direction to go in. I found an example of something similar (albeit far more complicated) here . 我相信这可以通过使用CodeMirror的Widget是可能的,但我迷路了为去哪个方向,我发现类似的(虽然复杂得多)的东西的例子在这里 。
I also tried tagify which is extremely similar to what I'm after but doesn't have multi-line inputs, which is a requirement. 我还尝试了tagify ,它与我所追求的极其相似,但是没有多行输入,这是必需的 。
All I need is the ability to add and remove (via backspace with the caret just behind the tag) these spans but there doesn't appear to be a simple solution. 我需要的只是能够添加和删除这些范围(通过带有标签后面的插入号的退格键),但是似乎没有一个简单的解决方案。
Also if there is a convenient library or some other direction I can go in not involving CodeMirror that'd also be fine. 另外,如果有一个方便的库或其他指示,我可以不涉及CodeMirror,这也可以。
CodeMirror is actually well suited for this. CodeMirror实际上非常适合于此。
First insert some placeholder into the document, such as [[tag]]. 首先,将一些占位符插入文档中,例如[[tag]]。
var lineNumber = 0;
var charNumber = 0;
var snippet = "[[tag]]"
editor.doc.replaceRange(snippet, {line:lineNumber, from: charNumber});
Then create your DOM element, I recommend a span. 然后创建您的DOM元素,我建议一个跨度。
var htmlNode = document.createElement("span");
//Style and add what you like to the span
Then use doc.markText
to replace it with that node. 然后使用
doc.markText
将其替换为该节点。
editor.doc.markText({line: lineNumber,ch: charNumber}, {line: lineNumber,ch: charNumber + snippet.length}, {
replacedWith: htmlNode
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.