typescript 如何在monaco编辑器示例中设置制表符宽度？

hwamh0ep 于 2023-01-06 发布在 TypeScript

关注(0)|答案(4)|浏览(207)

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

**你能帮我调整这个设置吗？**我猜我误解了编辑器文档（否则很好），所以任何导航帮助都是非常有帮助的。

一如既往，我们非常感谢您提供任何建议和提示。非常感谢您考虑这个问题！

typescript

来源：https://stackoverflow.com/questions/41107540/how-can-i-set-the-tab-width-in-a-monaco-editor-instance

4条答案

按热度按时间

55ooxyrt1#

答案已经在GitHub的一期文章中讨论过了，关键是不要直接在编辑器上更新选项，而是在底层模型上更新。

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

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

这对我在摩纳哥Playground很有效。
这一切都要归功于摩纳哥的开发人员-我绝对喜欢他们的编辑，这进一步提高了它。

赞(0）回复(0）举报 2023-01-06

pprl5pva2#

我也不知道如何设置一个全局tabSize选项，但是我确实设法为HTML设置了这个选项：
editor.languages.html.htmlDefaults.setOptions({ tabSize: 2 });

赞(0）回复(0）举报 2023-01-06

kgsdhlau3#

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

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

赞(0）回复(0）举报 2023-01-06

vaqhlq814#

如果你只是第一次需要设置制表符宽度，你可以在构造函数中使用tabSize选项来完成：

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

赞(0）回复(0）举报 2023-01-06

我来回答

typescript 如何在monaco编辑器示例中设置制表符宽度？

4条答案

相关问题

热门标签

最新问答