代码之家  ›  专栏  ›  技术社区  ›  mezzopiano

如何在摩纳哥编辑器实例中设置选项卡宽度?

  •  9
  • mezzopiano  · 技术社区  · 8 年前

    我想 monaco editor .

    到目前为止,我已经能够通过传入 IEditorOptions 在初始化期间。这些选项也可以在以后使用 updateOptions 方法,如以下示例中可见:

    // Many settings can be applied at initialization
    var editor = monaco.editor.create(
      document.getElementById("editor"), {
        language: "html",
        value: "<p>Hello World!</p>",
    });
    
    // ... they can also be changed later ...
    editor.updateOptions({
      lineNumbers: true,
    })
    
    // ... however, tabSize is not among the settings that can be modified --
    // the following has no effect:
    editor.updateOptions({
      tabSize: 2,
    })
    

    然而 tabSize 设置为 未在此接口中定义 ,而是一个单独的 FormattingOptions 接口,我无法找到绑定(代码搜索找到 only the interface definition

    你能帮我调整这个设置吗?

    和往常一样,任何想法和提示都会受到极大的赞赏。 非常感谢您考虑这个问题!

    3 回复  |  直到 8 年前
        1
  •  13
  •   mezzopiano    8 年前

    答案已经在相应的文章中讨论过了 GitHub issue 技巧不是直接更新编辑器上的选项,而是更新基础模型上的选项。要延伸上面的剪断部分:

    const editor = monaco.editor.create(
      document.getElementById("editor"), {
        language: "html",
        value: "<p>Hello World!</p>",
    });
    
    editor.getModel().updateOptions({ tabSize: 2 })
    

    这适用于我()在 Monaco Playground .

    这一切都归功于摩纳哥的开发人员-我绝对喜欢他们的编辑,这进一步改善了它。

        2
  •  3
  •   jdub    8 年前

    我还不知道如何设置一个全局 tabSize 选项,但我确实为 :

    editor.languages.html.htmlDefaults.setOptions({ tabSize: 2 });

        3
  •  1
  •   Steven Bell    5 年前

    const markdownModel = monaco.editor.createModel("", "markdown");
    const styleModel = monaco.editor.createModel("", "css");
    

    您现在可以使用访问模型 monaco.editor.getModels() 它返回一个数组,因此您可以 monaco.editor.getModels()[0] 要访问您的第一个模型,或者更简单的方法是通过以下方式访问每个模型

    markdownModel.updateOptions({ tabSize: 2 });
    styleModel.updateOptions({ tabSize: 4 });
    

    作为奖励,您可以创建两个独立的编辑器 通过创建两个独立的模型并将其链接到独立的 DOM元素。

    monaco.editor.create(document.getElementById("markdown-editor"), {
      model: markdownModel,
      wordWrap: "wordWrapColumn",
      wordWrapColumn: 60,
      wordWrapMinified: true,
      wrappingIndent: "indent",
      lineNumbers: "off",
      scrollBeyondLastLine: false
    });
    
    monaco.editor.create(document.getElementById("style-editor"), {
      model: styleModel,
      wordWrap: "wordWrapColumn",
      wordWrapColumn: 80,
      wordWrapMinified: true,
      wrappingIndent: "indent",
    });