react代码编辑器 react-ace

首先说一下网上其他的编辑器：

轻量级：
1.codeMirror ：文档和代码对不上，没有diff功能
github地址：https://github.com/codemirror/CodeMirror
示例代码：https://uiwjs.github.io/react-codemirror/

2.react-code-diff 最近一次维护2018年，直接报错无法使用

重量级：
1.monaco ：微软出品，值得信赖
github地址：https://github.com/microsoft/monaco-editor

2.diff2html：也是功能很全的编辑器
官网：https://diff2html.xyz/
gitbub地址：https://github.com/rtfpessoa/diff2html

3.aceEditor：今天的重点
官网：https://ace.c9.io/#nav=about&api=editor
github地址：https://github.com/ajaxorg/ace

aceEditor其他版本

官方的aceEditor是js版的，后续有其他团队陆续出了vue版和react版，是官方的拓展版本，使用可参考官方的文档，其中字段名和方法名都和官方一致，方便使用。

vue版github地址：https://github.com/chairuosen/vue2-ace-editor
react版github地址：https://github.com/securingsincity/react-ace

react版aceEditor

使用方法：
install

npm install react-ace ace-builds

import AceEditor from 'react-ace';
import 'ace-builds/src-noconflict/mode-jsx';// jsx模式的包
import 'ace-builds/src-noconflict/theme-monokai';// monokai的主题样式
import 'ace-builds/src-noconflict/ext-language_tools'; // 代码联想const jsx = `import AceEditor from 'react-ace';
import 'ace-builds/src-noconflict/mode-golang'; // sql模式的包
import 'ace-builds/src-noconflict/mode-jsx';// mysql模式的包`;<AceEditormode='jsx'theme="monokai"name="app_code_editor"fontSize={14}showPrintMarginheight="200px"width="1000px"showGutteronChange={value => {console.log(value); // 输出代码编辑器内值改变后的值}}value={jsx}wrapEnabledhighlightActiveLine  //突出活动线enableSnippets  //启用代码段setOptions={{enableBasicAutocompletion: true,   //启用基本自动完成功能enableLiveAutocompletion: true,   //启用实时自动完成功能 （比如：智能代码提示）enableSnippets: true,  //启用代码段showLineNumbers: true,tabSize: 2,}}annotations={[{ row: 0, column: 2, type: 'error', text: 'Some error.'}]} // 错误，警告
/>

效果：

diff用法

import { diff as DiffEditor } from "react-ace";const goLang = `package main
import "fmt"func main() {fmt.Println("Hello, 世界")
}`;const goLang1 = `package main
import "fmt"func main() {fmt.Println("Hello, 世界");fmt.Println("Hello, 世界");
}`;
<DiffEditormode='golang'theme="monokai"value={[goLang, `${goLang1};`]}height="1000px"width="1000px"
/>

注意：不定义样式看不见效果，className为：.codeMarker

.codeMarker {background: #fff677;position: absolute;z-index: 20;
}