react代码编辑器 react-ace
<h2 id="首先说一下网上其他的编辑器">首先说一下网上其他的编辑器：</h2><h3 id="轻量级">轻量级：</h3>
<h4 id="1codemirror-文档和代码对不上没有diff功能">1.codeMirror ：文档和代码对不上，没有diff功能</h4>
<p>github地址：https://github.com/codemirror/CodeMirror<br>
示例代码：https://uiwjs.github.io/react-codemirror/</p>
<h4 id="2react-code-diff-最近一次维护2018年直接报错无法使用">2.react-code-diff 最近一次维护2018年，直接报错无法使用</h4>
<h3 id="重量级">重量级：</h3>
<h4 id="1monaco-微软出品值得信赖">1.monaco ：微软出品，值得信赖</h4>
<p>github地址：https://github.com/microsoft/monaco-editor</p>
<h4 id="2diff2html也是功能很全的编辑器">2.diff2html：也是功能很全的编辑器</h4>
<p>官网：https://diff2html.xyz/<br>
gitbub地址：https://github.com/rtfpessoa/diff2html</p>
<h4 id="3aceeditor今天的重点">3.aceEditor：今天的重点</h4>
<p>官网：https://ace.c9.io/#nav=about&api=editor<br>
github地址：https://github.com/ajaxorg/ace</p>
<h4 id="aceeditor其他版本">aceEditor其他版本</h4>
<p>官方的aceEditor是js版的，后续有其他团队陆续出了vue版和react版，是官方的拓展版本，使用可参考官方的文档，其中字段名和方法名都和官方一致，方便使用。</p>
<p>vue版github地址：https://github.com/chairuosen/vue2-ace-editor<br>
react版github地址：https://github.com/securingsincity/react-ace</p>
<h3 id="react版aceeditor">react版aceEditor</h3>
<h4 id="安装">安装</h4>
<pre><code>npm install react-ace ace-builds
</code></pre>
<h4 id="使用方法">使用方法：</h4>
<pre><code>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模式的包`;
<AceEditor
mode='jsx'
theme="monokai"
name="app_code_editor"
fontSize={14}
showPrintMargin
height="200px"
width="1000px"
showGutter
onChange={value => {
console.log(value); // 输出代码编辑器内值改变后的值
}}
value={jsx}
wrapEnabled
highlightActiveLine//突出活动线
enableSnippets//启用代码段
setOptions={{
enableBasicAutocompletion: true, //启用基本自动完成功能
enableLiveAutocompletion: true, //启用实时自动完成功能 （比如：智能代码提示）
enableSnippets: true,//启用代码段
showLineNumbers: true,
tabSize: 2,
}}
annotations={[{ row: 0, column: 2, type: 'error', text: 'Some error.'}]} // 错误，警告
/>
</code></pre>
<h4 id="效果">效果</h4>
<p><img src="https://img2022.cnblogs.com/blog/1821637/202210/1821637-20221011152255706-1044125003.png"></p>
<h4 id="diff用法">diff用法</h4>
<pre><code>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, 世界");
}`;
<DiffEditor
mode='golang'
theme="monokai"
value={}
height="1000px"
width="1000px"
/>
</code></pre>
<p><img src="https://img2022.cnblogs.com/blog/1821637/202210/1821637-20221011152405646-2014335897.png"></p>
<blockquote>
<p>注意：不定义样式看不见效果，className为：.codeMarker</p>
</blockquote>
<pre><code>.codeMarker {
background: #fff677;
position: absolute;
z-index: 20;
}
</code></pre><br><br>
来源：https://www.cnblogs.com/tommymarc/p/16779379.html
頁:
[1]