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

这不太可能是非常昂贵的（除非你每秒创建数百个编辑器），但更优雅的解决方案是定义你的包装模式一次，并阅读你的内部模式（mode变量代码来自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,

已应用代码镜像叠加

2 个答案: