web端代码编辑器和diff工具

深碍√TFBOYSˉ_ 2022-10-20 14:58 186阅读 0赞

###### *最新更新时间：2021年05月18日13:51:49* ######

#### [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] ####

> 本文内容：

#### 项目中引入 ####

npm install monaco-editor --save-dev
    npm install monaco-editor-webpack-plugin --save-dev
    npm install react-monaco-editor -S
    //package.json
    { 
    	"dependencies": { 
    		"react-monaco-editor": "^0.40.0",
    	}
    }

#### react项目中的代码diff工具 ####

*  JSON.stringify(JSON.parse(json)) 将单行json字符串以带有换行和缩进的格式形式输出

import {  PureComponent } from 'react';
    import * as monaco from 'monaco-editor/esm/vs/editor/editor.main.js';
    class DiffViewer extends PureComponent { 
    
    	constructor(props) { 
            super(props);
            this.state = { };
            this.editor = null;
        }
        
    	componentDidMount(){ 
    		let json1 = '';//json字符串
    		let json2 = '';//json字符串
    		if(!this.editor){ 
                this.editor = monaco.editor.createDiffEditor(this.refs.monacoDom, { 
                    enableSplitViewResizing: false,
                    automaticLayout: true,
                    readOnly: true,//false-可编辑
                    fontSize: 18,//显示字号
                    minimap: { enabled:false},
                })
            }
            const originalModel = monaco.editor.createModel(JSON.stringify(JSON.parse(json1),null,2), 'javascript');
            const modifiedModel = monaco.editor.createModel(JSON.stringify(JSON.parse(json2),null,2), 'javascript');
            this.editor.setModel({ 
                original: originalModel,
                modified: modifiedModel
            })
    	}
    	
    	render(){ 
    		return(<div ref="monacoDom"></div>)
    	}
    }

#### html直接显示json结构 ####

*  JSON.stringify(data,null,2)

#### 参考资料 ####

*  [Monaco diff][]
 *  [monaco-editor][]
 *  [Monaco Editor API][]
 *  [monaco editor各种功能实现总结][monaco editor]

> 感谢阅读，欢迎评论^-^

## [`打赏我吧^-^`][-] ##

[-_-]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[Monaco diff]: https://codepen.io/coltpini/pen/rJKNwg
[monaco-editor]: https://github.com/microsoft/monaco-editor
[Monaco Editor API]: https://microsoft.github.io/monaco-editor/api/index.html
[monaco editor]: https://blog.csdn.net/gao_grace/article/details/88890895
[-]: https://blog.csdn.net/wanshaobo888/article/details/86249460