代码镜像覆盖应用

Question

我可以在模式定义之外应用代码镜像覆盖吗？下面的代码可以工作，但似乎是多余的和缓慢的。我正在为页面上的每个编辑器/查看器定义一个模式，该模式对许多人来说可能是零。如何进行优化？

理想情况下，我想定义一次模式，然后根据需要应用覆盖。

如果可以的话，我一直找不到答案。我想要定义一个模式(它突出显示一个搜索术语(see this question))，然后我想将该模式应用于页面上的许多编辑器/查看器。每个编辑器/查看器都有不同的语言，并设置在DOM元素(例如<pre class="sourcecode" language="javascript">code</pr>)上。

我认为解决方案将是处理return CodeMirror.overlayMode(CodeMirror.getMode(config, mode),searchOverlay, true);，但我一直无法使它发挥作用。

$('.sourcecode').each( function() {
        var value = $(this).text(),
            search = (typeof keyword === 'undefined') ? false : true,
            mode =  $(this).attr('language'),
            pre = $(this).get(0),
            line = ($(this).attr('firstLineNumber') == undefined) ? 1 : parseInt($(this).attr('firstLineNumber'), 10);

        // CodeMirror search highlighing

        // this seems redundent, slow, and messy
        if (search) {
            CodeMirror.defineMode("highlightSearch", function(config, parserConfig) {
              var searchOverlay = {
                token: function(stream, state) {
                    if (stream.match(keyword)) {
                        return "highlightSearch";
                    }

                    while (stream.next() != null && !stream.match(keyword, false)) {}
                    return null;
                }
              };
              return CodeMirror.overlayMode(CodeMirror.getMode(config, mode),searchOverlay, true);
            });
        }

        var viewer = CodeMirror(function(elt) {
            pre.parentNode.replaceChild(elt, pre);
        }, {
            value: value,
            lineNumbers: true,
            firstLineNumber: line,
            matchBrackets: true,
            lineWrapping: true,
            readOnly: true,
            mode: (search) ? 'highlightSearch' : mode,
        });
    });

谢谢你的帮助。

Answer 1

这不太可能非常昂贵(除非您每秒创建数百个编辑器)，但更优雅的解决方案是只定义一次包装模式，并从其parserConfig对象中读取内部模式(代码中的parserConfig变量)，比如parserConfig.inner。然后，只需将{name: "highlightSearch", inner: mode}作为mode选项传递即可。

Answer 2

为了完整起见，我在.each之外定义了模式。在我替换的模式定义中

return CodeMirror.overlayMode(CodeMirror.getMode(config, mode),searchOverlay, true);

使用

return CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.inner),searchOverlay, true);

被取代

mode: (search) ? 'highlightSearch' : mode,

使用

mode: (search) ? {name: 'highlightSearch', inner: mode} : mode,