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接口中定义，我无法找到它的绑定（代码搜索仅找到接口定义）。

你能帮我调整一下这个设置吗？我的猜测是我误解了（否则非常出色）编辑器文档，因此在浏览它时提供的任何帮助都会非常有帮助。

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

4

3 回答 3

12

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

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

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

这适用于摩纳哥游乐场的我 (™) 。

这一切都归功于 monaco 开发人员——我非常喜欢他们的编辑器，这进一步改进了它。

于 2017-01-24T19:10:46.857 回答
3

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

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

于 2017-01-24T16:54:42.173 回答
1

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

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",
});
于 2019-11-19T18:51:51.250 回答