web端代码编辑器和diff工具

最新推荐文章于 2024-10-08 08:45:15 发布

万少博

最新推荐文章于 2024-10-08 08:45:15 发布

阅读量667

点赞数

分类专栏： web前端开发

本文链接：https://blog.csdn.net/wanshaobo888/article/details/116986596

版权

web前端开发专栏收录该内容

55 篇文章 2 订阅

订阅专栏

最新更新时间：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>)
	}
}