Monaco Editor结合Vue搭建好用的json格式化网站

Monaco Editor

github地址

安装

> npm install monaco-editor

然后导入monaco

import * as monaco from "monaco-editor/esm/vs/editor/edcore.main"; // 引入monaco-editor

Html定义

<div id="monaco-editor" ref="monaco"></div>

初始化编辑器

    initEditor() {
      this.editor = monaco.editor.create(this.$refs.monaco, {
        value: "{}",
        language: this.language,
        lineNumbers: "on",
        readOnly: false,
        theme: "vs-dark",
        fontSize: 20,
        automaticLayout: true, // 自动布局
        SeverityLevel: "warning",
      });
    }

包装获取编辑器， 防止直接使用卡死。原因是vue3

    getEditor() {
      if (this.editor == null) {
        return;
      }

      return toRaw(this.editor);
    }

获取编辑器内容

this.getEditor().getValue();

主动触发json格式化

this.getEditor().trigger(null, "editor.action.formatDocument");

最终成果：

Demo体验地址

欢迎提问交流！！！