摩纳哥编辑器：只显示文件的一部分答案

【问题标题】：Monaco Editor: only show part of document摩纳哥编辑器：只显示文件的一部分
【发布时间】：2020-03-18 08:29:46
【问题描述】：

有没有办法只显示文档的一部分，或者在模型的 monacos 情况下，同时仍然获得整个文档的智能感知？

我只希望用户编辑文档的一部分，但用户应该能够获得正确的上下文智能感知。

我的用例最好隐藏不可编辑的部分，但也可以停用它们。

如果无法做到这一点，是否有任何嵌入式编辑器可以做到这一点，或者可以通过修改语言服务器来实现？

【问题讨论】：

标签： javascript editor monaco-editor language-server-protocol

【解决方案1】：

Monaco 编辑器将每一行作为容器加载到类名为“view-lines”的部分下。加载编辑器内容后，将“display: none”设置为要隐藏的每一行的相应容器。

实现：https://jsfiddle.net/renatodc/s6fxedo2/

let value = `function capitalizeFirstLetter(string) {
\treturn string.charAt(0).toUpperCase() + string.slice(1);
}

$(function() {
\tlet word = "script";
\tlet result = capitalizeFirstLetter(word);
\tconsole.log(result);
});
`
let linesToDisable = [1,2,3];
let editor = monaco.editor.create(document.getElementById('container'), {
    value,
    language: 'javascript',
    theme: 'vs-dark',
    scrollbar: {
      vertical: "hidden",
      handleMouseWheel: false
    },
    scrollBeyondLastLine: false
});

// onLoad event for Monaco Editor: https://github.com/Microsoft/monaco-editor/issues/115
let didScrollChangeDisposable = editor.onDidScrollChange(function() {
    didScrollChangeDisposable.dispose();
    setTimeout(function() {
      $(".monaco-editor .view-lines > div").each(function(i) {
        if(linesToDisable.includes(i+1)) {
          $(this).css("display","none");
          $(this).css("pointer-events","none");
        }
      });
    },1000);
 });

从 Monaco 滚动将再次渲染这些行并中断实现。为防止这种情况发生，请在 Monaco 中禁用滚动功能，为编辑器容器设置固定高度，并使用浏览器或父容器进行滚动。

如果您使用箭头键“向上”或“向下”导航到隐藏的内容，光标仍然可以工作，并且键入会中断实现。您也许可以使用编辑器的 onKeyDown 事件来防止这种情况发生。

如果您正在寻找一个防破解的实现，我建议您只加载您希望编辑的文档部分的 Monaco 编辑器。然后扩展完成提供程序（Intellisense），如本例所示：https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-completion-provider-example

monaco.languages.registerCompletionItemProvider('javascript', {
    provideCompletionItems: function(model, position) {
        return {
            suggestions: [
                {
                    label: "capitalizeFirstLetter",
                    kind: monaco.languages.CompletionItemKind.Method,
                    documentation: "Capitalize the first letter of a word",
                    insertText: "capitalizeFirstLetter("
                }
            ]
        };
    }
});

monaco.editor.create(document.getElementById("container"), {
    value: `$(function() {
\tlet word = "script";
\tlet result = capitalizeFirstLetter(word);
\tconsole.log(result);
});
  `,
    language: "javascript"
});

使用像 Esprima 这样的 AST 解析器从源文档中获取标识符，并将它们插入到建议数组中。

【讨论】：