MonacoEditor編輯器自動格式代碼

MonacoEditor代碼編輯器怎么實現自動格式化代碼功能？

1.界面上右鍵下邊截圖的這個Format Document點擊一下就好了

2.用代碼怎么實現呢,非只讀的情況

// 寫法1
const { editor } = ref.current;
editor.setValue('這里寫要待格式化的數據');
editor.trigger('anyString', 'editor.action.formatDocument');//自動格式化代碼
editor.setValue(editor.getValue());//再次設置
// 寫法2
const { editor } = ref.current;
editor.setValue('這里寫要待格式化的數據');
editor.getAction('editor.action.formatDocument').run();//自動格式化代碼
editor.setValue(editor.getValue());//再次設置
//寫法不同目的是一樣的，上面那個自動格式化代碼的操作，就是上邊方法截圖的那個
// 這個寫法需要注意的情況是

  // MonacoEditord的配置只能是：readOnly: false,

　// 只讀狀態下無法生效

3.如果需求是只讀的情況怎么處理

// 方案1：
// readOnly: true的情況
// setValue前先把數據自己處理一下
const { editor } = ref.current;
editor.setValue(checkJsonCode('待格式化的數據'));
export function checkJsonCode(strJsonCode) {
  let res = '';
  try {
    for (let i = 0, j = 0, k = 0, ii, ele; i < strJsonCode.length; i++) {
      ele = strJsonCode.charAt(i);
      if (j % 2 === 0 && ele === '}') {
        // eslint-disable-next-line no-plusplus
        k--;
        for (ii = 0; ii < k; ii++) ele = `    ${ele}`;
        ele = `\n${ele}`;
      } else if (j % 2 === 0 && ele === '{') {
        ele += '\n';
        // eslint-disable-next-line no-plusplus
        k++;
        for (ii = 0; ii < k; ii++) ele += '    ';
      } else if (j % 2 === 0 && ele === ',') {
        ele += '\n';
        for (ii = 0; ii < k; ii++) ele += '    ';
        // eslint-disable-next-line no-plusplus
      } else if (ele === '"') j++;
      res += ele;
    }
  } catch (error) {
    res = strJsonCode;
  }
  return res;
}
 // 方案2：
那就用一個div來當做遮罩層覆蓋編輯功能，然后把改成readOnly:false