如何在摩纳哥编辑器实例中设置标签宽度

Question

我想在摩纳哥编辑器的情况下设置压痕宽度（在空格中）。

到目前为止，我能够通过在初始化过程中传递任何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接口，我无法找到绑定（一个代码搜索仅查找接口定义）。

您能帮助我调整此设置吗？我猜测我正在误解（否则出色的）编辑器文档，因此导航的任何帮助都会非常有帮助。

一如既往，任何想法和提示都将受到极大的赞赏。非常感谢您考虑此问题！

Answer 1

刚刚在相应的github问题中讨论了答案。诀窍不是直接更新编辑器上的选项，而是在基础模型上更新。延长上面的剪刀：

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

这对我（™）在摩纳哥游乐场的工作。

所有这些都归功于摩纳哥开发人员＆Mdash;我绝对喜欢他们的编辑，这进一步改进了。

Answer 2

我也无法弄清楚如何设置全局tabSize选项，但是我确实设法专门为 html 设置了该选项：p> editor.languages.html.htmlDefaults.setOptions({ tabSize: 2 });

Answer 3

如果您只需要首次设置选项卡宽度，则可以使用tabSize选项在构造函数中进行操作：

monaco.editor.create(document.getElementById('container'), {
    value: "function hello() {ntalert('Hello world!');n}",
    language: 'javascript',
    tabSize: 2,
});

Answer 4

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

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