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

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,
            .....
          })
        )

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

-雪之下雪乃-

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值