vue3使用codemirror-editor-vue3代码编辑器以及解决格式不对齐 整体左偏问题

一、使用

1.安装

npm install codemirror-editor-vue3 codemirror@5.x -S
npm install @types/codemirror -D

2.使用
 

import Codemirror from 'codemirror-editor-vue3';
import { formDesign } from '/@/stores/formDesign';
import 'codemirror/mode/javascript/javascript.js';
import type { CmComponentRef } from 'codemirror-editor-vue3';
import type { Editor, EditorConfiguration } from 'codemirror';
import 'codemirror/addon/display/placeholder.js';
const code = ref(`
[
  {
    "label": "标签1",
    "value": "value1",
    "children": [
      {
        "label": "标签11",
        "value": "value11"
      },
      {
        "label": "标签12",
        "value": "value12"
      }
    ]
  },
  {
    "label": "标签2",
    "value": "value2",
    "children": [
      {
        "label": "标签21",
        "value": "value21"
      },
      {
        "label": "标签22",
        "value": "value22"
      }
    ]
  }
]
`);
const cmRef = ref<CmComponentRef>();
const cmOptions: any = {
	mode: 'text/javascript',
	autoRefresh: true,
};

const onChange = (val: string, cm: Editor) => {
	console.log(val);
	console.log(cm.getValue());
};

const onInput = (val: string) => {
	console.log(val);
};

const onReady = (cm: Editor) => {
	console.log(cm.focus());
};
onUnmounted(() => {
	cmRef.value?.destroy();
});

 二、格式不对齐 整体左偏问题

增加配置项 autoRefresh: true：尝试在 cmOption 中添加 autoRefresh: true。

const cmOptions: any = {
	mode: 'text/javascript',
	autoRefresh: true,
};

还是不行的话在需要的地方进行手动刷新，比如视图渲染的时候，比如弹框打开的时候，例如某个数据回来之后
 

	nextTick().then(() => {
		cmRef.value?.refresh();
	});

codemirror-editor-vue3 - npm (npmjs.com)