Question

我想在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）。

你能帮我调整一下这个设置吗？我的猜测是我误解了（其他优秀的）编辑器文档，所以任何导航帮助都会非常有帮助。

与往常一样，任何想法和提示都非常受欢迎。 非常感谢你考虑这个问题！

Answer 1

答案刚刚在相应的GitHub issue中讨论过。诀窍不是直接更新编辑器上的选项，而是更新底层模型。扩展上面的剪辑：

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

editor.getModel().updateOptions({ tabSize: 2 })

这适用于Monaco Playground中的me（™）。

所有这一切归功于摩纳哥开发者 - 我非常喜欢他们的编辑，这进一步改善了它。

Answer 2

我还无法弄清楚如何设置全局tabSize选项，但我确实设法专门为 HTML 设置选项：

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

Answer 3

这将创建两个可以独立控制的模型

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",
});

如何在monaco编辑器实例中设置标签宽度？

3 个答案: