首页 > 其他分享 >【React18专栏】React中monaco-editor组件的使用总结

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

时间:2023-06-02 20:12:31浏览次数:39  
标签:格式化 React json editor 设置 monaco 组件

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

代码如下:

标签:格式化,React,json,editor,设置,monaco,组件
From: https://www.cnblogs.com/qinghuanjing/p/17452804.html

相关文章

  • react UI框架之chakra-ui
    前言:对于之前熟悉antd的人来说,学习这个框架很痛苦,但使用久了,感觉还行。老外的思维模式真的不一样。 UI:chakra-ui 官方使用文档:https://chakra-ui.com/docs/components/toast......
  • react配置API请求代理
    需求当请求http://10.1.1.1:3131/v1/*接口时,需要代理到8181端口。如果只需要代理匹配到/v1路径的请求,可以在package.json中使用http-proxy-middleware进行自定义代理配置。以下是一个示例:首先,确保已经安装了http-proxy-middleware包。如果没有安装,可以使用以下命令进行......
  • Vue3 reactive 定义一个变量时,如何具有响应式?
    错误示范:constarr=reactive([]);constload=()=>{constres=[2,3,4,5];//假设请求接口返回的数据//方法1失败,直接赋值丢失了响应性//arr=res;//方法2这样也是失败//arr.concat(res);//方法3可以,但是很麻烦res.forEach(e=>{......
  • react 实现聊天界面,发送消息自动到底部
    <divstyle={{float:"left",clear:"both"}}ref={(el)=>{this.messagesEnd=el;}}></div>scrollToBottom=()=>{this.messagesEnd.scrollIntoView({behavior:"auto"......
  • React 配置文件 | 配置本地IP地址和端口号
    问题create-react-app默认端口号是3000,当有的别的项目占用该端口号时自己想使用别的端口号时方法1、更改node_modulesa.依次打开“node_modules”—“react-scripts”—“scripts”文件夹,找到并打开start.js文件;b.在start.js文件中查找并修改“DEFAULT_PORT”项的端口值即......
  • react项目,或者vue项目。手动隐藏warning。保持控制台的清晰
    非常感谢您的指正和提醒,我的回答中使用了arguments对象,而这不是一个好的实践。可以使用ES6的剩余参数(restparameters)来代替arguments对象。以下是使用剩余参数替换arguments对象的示例代码:importReactfrom'react';importReactDOMfrom'react-dom';constconsol......
  • 【React工作记录七十七】React+hook+ts+ant design封装一个input和select搜索的组件
    前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷微信公众号前端小歌谣需求分析首先我们需要实现......
  • 分析| React Native和Flutter在移动开发中的优势
    移动应用架构描述了设计和构建应用的模式与技术。该架构可以提供构建应用时应遵循的路线图和最佳实践,构建一个结构合理的应用。移动应用的常见层次结构包括用户界面层、业务逻辑层、数据访问层,但是随着跨平台开发框架的不断发展,以ReactNative、Flutter为代表的工具已经深入到移动......
  • 【React工作记录七十八】React+hook+ts+ant design封装一个table的组件
    前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷微信公众号前端小歌谣需求分析在前端项目中最常......
  • 新型探索:React Native与小程序容器技术的结合
    ReactNative是由Facebook开发并于2015年首次发布的一个框架,用于构建原始的移动应用程序。它具有许多技术上的优势:跨平台开发:使用ReactNative,您可以使用相同的代码库构建同时运行在iOS和Android平台上的应用程序。这种跨平台的开发方式可以大大减少开发工作量和时间成本,因为您不需......