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

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

monaco-editor typescript javascript

9

mezzopiano · 技术社区 · 8 年前

到目前为止,我已经能够通过传入 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",
});