monaco-editor 基础用法
组件已经封装过了
monaco-editor 组件对json数据格式化的处理
需求:在初始化加载json格式的数据时,需要实现 monaco-editor 组件对代码的自动格式化
没有格式化的json格式数据显示如下:
初始化加载数据完成后,想要达到的显示效果如下:
- 界面上右键下边截图的这个Format Document点击一下就好了(不能设置只读状态)
- 使用 editor.getAction('editor.action.formatDocument').run()方法
注意:该方法需要设置到定时器里才会生效,存在时间延迟,同时不能设置成只读模式
对于如果想要设置为只读模式:我看到一种解决方式,不知道能不能实现,可以试一下:
这里我的json编辑器是需要只读的,如果在onMounted中直接设置它的readOnly: true,是格式化不了的。需要先设置为false,然后获取到后台数据时,格式化处理后再将readOnly设置成true
参考链接如下:
https://www.cnblogs.com/ChineseLiao/p/15214921.html
https://blog.csdn.net/m0_48276047/article/details/127450447
https://github.com/microsoft/monaco-editor/issues/2664
monaco-editor 组件自动折叠fold第一层级(二级、三级)代码
核心代码使用:editor.getAction('editor.foldLevel1').run();
但是经过个人测试,发现还需要把这行代码加到onMount钩子函数中去,同时也要放到定时器里才生效
代码如下:
标签:格式化,React,json,editor,设置,monaco,组件 From: https://www.cnblogs.com/qinghuanjing/p/17452804.html