【React18专栏】React中monaco-editor组件的使用总结

发布时间 2023-06-02 20:03:41作者: Lu西西

monaco-editor 基础用法

组件已经封装过了

monaco-editor 组件对json数据格式化的处理

需求:在初始化加载json格式的数据时,需要实现 monaco-editor 组件对代码的自动格式化

没有格式化的json格式数据显示如下:

初始化加载数据完成后,想要达到的显示效果如下:

  1. 界面上右键下边截图的这个Format Document点击一下就好了(不能设置只读状态)

  1. 使用 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钩子函数中去,同时也要放到定时器里才生效

代码如下: