解决monaco-editor在vue中回显时没有宽高和自动格式化代码

解决monaco-editor在vue中回显时没有宽高

    // 初始化编辑器
    this.editor = Monaco.editor.create(code, {
      value: '',
      language: 'html',
      tabSize: 2,
      scrollBeyondLastLine: false,
      automaticLayout: true // 添加这行代码，表示自动布局
    });

手动触发action

比如说自动格式化代码，一般情况下都需要在代码编辑器右键菜单选择 format document来实现代码格式化。那么我们如何手动触发action呢？
方式一：
trigger的第一个参数没有实际意义，可以随便写，第二个参数表示actions的id，控制台打印this.editor，可以获取到所有action相关内容

triggerAction(id: string): void {
  if (!this.editor) return;
  this.editor.trigger("anything", id);
}

方式二：

triggerAction(id: string): void {
  if (!this.editor) return;
  this.editor.getAction([id])._run();
  // 或者this.editor.getAction([id]).run();
}

方式二只有在editor创建时 readOnly: false情况下生效

自动格式化

调用时机：取到数据，然后再调用方法
方式一：

this.editor.trigger("anything", "editor.action.formatDocument");

方式二：

this.editor.getAction(["editor.action.formatDocument"])._run();