1. 首先先导入monaco editor
npm install monaco-editor// npm install monaco-editor --force // 版本冲突? 强行安装
2. 在react中使用
期望效果如下
3. 我遇到的问题 : 输入json数据后 未格式化 , json数据仍然一行展示
我遇到的问题 : 直接输入json数据会白屏报错
完整代码及解决方法如下
import * as monaco from 'monaco-editor' // 引入----------js 部分------------------------- const editorRef = useRef(null)const [code, setCode] = useState('console.log("Hello, world!");')useEffect(() => {if (!editorRef.current) {console.error('editorRef.current is null')return // 早期返回，避免创建编辑器}const editor = monaco.editor.create(editorRef.current, {value: code,language: 'json',theme: 'hc-black' // 主题可选: 'vs', 'vs-dark', 'hc-black'})// 编辑器内容可编辑editor.updateOptions({ readOnly: false })// 监听代码变化editor.onDidChangeModelContent(() => {setCode(editor.getValue())})// 格式化操作const formatAction = editor.getAction('editor.action.formatDocument')if (formatAction) {formatAction.run()}return () => {editor.dispose() // 组件卸载时销毁编辑器实例}}, [code])const formatJson = code => { // 封装了一个格式化函数try {const parsedJson = JSON.parse(code)const prettyJson = JSON.stringify(parsedJson, null, 2)editorRef.current.setValue(prettyJson)setCode(prettyJson)} catch (error) {console.error('Formatting error:', error)}}useEffect(() => {let aaa = {messages: [{text: 'Hello, how are you?',files: []}]}let newCodeswitch (activeKey2) {case '1':newCode = 'console.log("Hello, world!");'breakcase '2':newCode = '{title: hyy , dataIndex: age}'breakcase '3':newCode = JSON.stringify(aaa, null, 2) // json转成字符串就不会报错了,且需加上null, 2 让其具备格式化样式breakcase '4':newCode = '{title: hyy 456 , dataIndex: age}'breakdefault:newCode = 'console.log("Hello, world!");'break}// 更新代码并格式化setCode(newCode)formatJson(newCode) // 调用格式化函数}, [activeKey2]) const items2 = [{key: '1',label: '响应体'},{key: '2',label: '响应头'},{key: '3',label: '实际请求'},{key: '4',label: '提取'},{key: '5',label: '断言'}]const [activeKey2, setActiveKey2] = useState('1') // 切换tabs-----------html 部分----------------<TabsdefaultActiveKey='1'items={items2}onChange={key => setActiveKey2(key)}></Tabs><divref={editorRef}style={{height: '500px',paddingTop: '20px',borderRadius: '10px'}}/>
