react 代码编辑器react-ace
<ul><li>github：https://github.com/securingsincity/react-ace</li>
<li>star ： 3.6k</li>
<li>npm : weekly downloads 280,045</li>
<li>DEMO of React Ace: https://securingsincity.github.io/react-ace/</li>
<li>install</li>
</ul>
<pre><code>npm install react-ace ace-builds
// or
yarn add react-ace ace-builds
</code></pre>
<ul>
<li>Basic Usage</li>
</ul>
<pre><code>import React from "react";
import { render } from "react-dom";
import AceEditor from "react-ace";
import "ace-builds/src-noconflict/mode-java";
import "ace-builds/src-noconflict/theme-github";
import "ace-builds/src-noconflict/ext-language_tools";
function onChange(newValue) {
console.log("change", newValue);
}
// Render editor
render(
<AceEditor
mode="java"
theme="github"
onChange={onChange}
name="UNIQUE_ID_OF_DIV"
editorProps={{ $blockScrolling: true }}
/>,
document.getElementById("example")
);
</code></pre>
<ul>
<li>编辑器配置
<ul>
<li>是否显示行号
<ul>
<li>showGutter// 是否显示行号 ，默认true, boolean</li>
<li>showPrintMargin // 超出列线是否展示,默认true,boolean</li>
<li>fontSize // 字体大小，number类型</li>
<li>highlightActiveLine // 当前作用行高亮，会有背景色的区别，boolean值，默认true</li>
<li>wrapEnabled // 代码一行展示不下是否换行，默认false不换行</li>
<li>readOnly // 代码只读，不能修改</li>
<li>setOptions // {} 对象</li>
<li>enableBasicAutocompletion 启用基本自动完成</li>
<li>enableLiveAutocompletion 启用实时自动完成 智能代码提示</li>
<li>enableSnippets 启用代码段</li>
</ul>
</li>
</ul>
</li>
</ul>
<pre><code>setOptions={{
printMarginColumn: 120 // 边距线，控制一行显示多少个字符 （// 到边界线的位置是120）
}}
</code></pre>
<ul>
<li>模式、主题和键盘处理程序
<ul>
<li>mode:</li>
</ul>
</li>
</ul>
<pre><code>javascript
java
python
xml
ruby
sass
markdown
mysql
json
html
handlebars
golang
csharp
coffee
css
</code></pre>
<ul>
<li>theme</li>
</ul>
<pre><code>monokai
github
tomorrow
kuroir
twilight
xcode
textmate
solarized dark
solarized light
terminal
</code></pre>
<pre><code>+ 所有模式、主题和键盘处理程序都应该直接通过ace-builds 来实现。
</code></pre>
<ul>
<li>Ace是用JavaScript编写的代码编辑器。</li>
</ul>
<p>如何添加语言片段？</p>
<p>您可以通过ace构建和language_tools直接导入代码段和模式。下面是一个示例<br>
如何在SelectionChange上获取所选文本？</p>
<p>如何从编辑器中提取文本取决于如何在编辑器上调用方法。</p>
<p>如何添加标记？</p>
<p>如何添加批注？</p>
<p>如何添加键绑定？</p>
<p>如何更改现有命令的键绑定？<br>
如何添加搜索框？</p>
<p>如何添加自定义模式？</p>
<p>如何添加语言片段？</p>
<p>如何在SelectionChange上获取所选文本？</p>
<p>如何设置编辑器选项，如将块滚动设置为无穷大？</p>
<p>如何在编辑器上调用方法？如何调用撤消或重做？</p>
<p>editor options 编辑器配置</p>
<p>selectionStyle ：选中样式， line 选中整行，整行样式变化 ，text 选中当前行文本添加样式变化<br>
highlightActiveLine: 当前光标聚焦行是否高亮<br>
highlightSelectedWord : 是否高亮选中文本，选中文本，高亮，和当前选中文本相同的文本框起来<br>
readOnly: 是否只读，设置只读之后，不可编辑<br>
cursorStyle： 光标样式"ace"|"slim"|"smooth"|"wide"<br>
mergeUndoDeltas: 合并撤销，修改内容之后，撤销之后，撤销内容的多少不同</p>
<p>https://www.jianshu.com/p/25fe3bf7ae4d</p><br><br>
来源：https://www.cnblogs.com/Running00/p/16741488.html
頁:
[1]