monaco-editor 初始化内容自动格式化

-雪之下雪乃-

于 2025-06-16 19:52:08 发布

阅读量248

点赞数 4

CC 4.0 BY-SA版权

分类专栏：前端编辑器文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/Aimonz/article/details/148699158

前端编辑器专栏收录该内容

1 篇文章

订阅专栏

1、由于 json-editor 实例初始化时机不确定，导致实例上提供的自动格式化方法调用不一定成功

如下：需要使用 setTimout 延迟格式化 monaco 编辑器的内容，但是如果页面卡顿，不一定能格式化页面成功

   this.$nextTick(() => {
     setTimeout(() => {
       if (this.vModel && this.vModel.trim()) {
          this.formatInitialContent()
       }
      }, 200)
   })
   // 格式化初始内容（只在初始化时调用）
    formatInitialContent() {
      if (!this.editor) return

      try {
        // 检查是否为有效的 JSON
        const value = this.editor.getValue()
        if (value && value.trim()) {
          JSON.parse(value)
          // 如果是有效的 JSON，执行格式化
          this.formatJson()
          console.log('初始内容格式化完成')
        }
      } catch (error) {
        console.log('初始内容不是有效的 JSON，跳过格式化')
      }
    },
     // 格式化
    formatJson() {
      if (this.editor) {
        this.editor.getAction('editor.action.formatDocument')?.run()
      }
    },

2、既然monaco-editor提供内置的格式化方法不确定，那一开始就对源数据进行处理，不使用编辑器实例的格式化方法，在初始化编辑器实例的时候，数据就已经是格式化好的。

如下：

        // createModel(value: string, language: string, uri: Uri)
        // value: 编辑器的初始内容
        // language: 编辑器的语言模式，这里是json
        // uri: 为模型提供一个唯一标识，方便monaco内部管理和引用
        const jsonModel = monaco.editor.createModel(
          (() => {
            try {
              // 如果已经是字符串，尝试解析并重新格式化
              if (typeof this.vModel === 'string') {
                const parsed = JSON.parse(this.vModel)
                return JSON.stringify(parsed, null, 2)
              }
              // 如果是对象，直接格式化
              return JSON.stringify(this.vModel, null, 2)
            } catch (e) {
              // 如果解析失败，返回原始值或空字符串
              return this.vModel || ''
            }
          })(),
          this.showSelect ? this.selectValue : 'json'
        )

        // 使用 markRaw 防止 Monaco Editor 实例被响应式系统处理
        this.editor = markRaw(
          monaco.editor.create(container, {
            model: jsonModel,
            .....
          })
        )