使用替换参数的代码镜像方法方法不起作用

Question

我发现https://codemirror.net/doc/manual.html#marktext是在codemirror编辑器中渲染html内容的一种方式。我正在尝试使用replaceWith选项进行相同的操作，并且似乎没有反映编辑器。

例如，我希望将{{dynamic.first_name}}转换为 <span><span>dynamic</span><span>first_name</span></span>并以HTML渲染，以便以某种方式进行样式。为了实现这一点，我做了以下内容：

let node = `<span><span>dynamic</span><span>first_name</span></span>`;
codemirror.markText(
from,
to,
{ replaceWith: node }
);

但是没有变化。编辑器仍然显示{{dynamic.first_name}}

Answer 1

您需要定义插入小部件的位置(行和字符(，并且let node需要为DOM元素。

let node = $(`<span><span>dynamic</span><span>first_name</span></span>`)[0];
codemirror.markText( { line: 1, ch: 0 }, { line: 1, ch: 1 }, {replacedWith: node} );