解决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();
Logo

前往低代码交流专区

更多推荐