react 代码编辑器reactace

• github：https://github.com/securingsincity/react-ace
• star ： 3.6k
• npm : weekly downloads 280,045
• DEMO of React Ace: https://securingsincity.github.io/react-ace/
• install

npm install react-ace ace-builds
// or
yarn add react-ace ace-builds

• Basic Usage

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")
);

• 编辑器配置
  • 是否显示行号
    • showGutter// 是否显示行号 ，默认true, boolean
    • showPrintMargin // 超出列线是否展示,默认true,boolean
    • fontSize // 字体大小，number类型
    • highlightActiveLine // 当前作用行高亮，会有背景色的区别，boolean值，默认true
    • wrapEnabled // 代码一行展示不下是否换行，默认false不换行
    • readOnly // 代码只读，不能修改
    • setOptions // {} 对象
    • enableBasicAutocompletion 启用基本自动完成
    • enableLiveAutocompletion 启用实时自动完成 智能代码提示
    • enableSnippets 启用代码段

setOptions={{
printMarginColumn: 120 // 边距线，控制一行显示多少个字符 （// 到边界线的位置是120）
}}

• 模式、主题和键盘处理程序
  • mode:

javascript
java
python
xml
ruby
sass
markdown
mysql
json
html
handlebars
golang
csharp
coffee
css

• theme

monokai
github
tomorrow
kuroir
twilight
xcode
textmate
solarized dark
solarized light
terminal

+ 所有模式、主题和键盘处理程序都应该直接通过ace-builds 来实现。

• Ace是用JavaScript编写的代码编辑器。

如何添加语言片段？

您可以通过ace构建和language_tools直接导入代码段和模式。下面是一个示例
如何在SelectionChange上获取所选文本？

如何从编辑器中提取文本取决于如何在编辑器上调用方法。

如何添加标记？

如何添加批注？

如何添加键绑定？

如何更改现有命令的键绑定？
如何添加搜索框？

如何添加自定义模式？

如何添加语言片段？

如何在SelectionChange上获取所选文本？

如何设置编辑器选项，如将块滚动设置为无穷大？

如何在编辑器上调用方法？如何调用撤消或重做？

editor options 编辑器配置

selectionStyle ：选中样式， line 选中整行，整行样式变化 ，text 选中当前行文本添加样式变化
highlightActiveLine: 当前光标聚焦行是否高亮
highlightSelectedWord : 是否高亮选中文本，选中文本，高亮，和当前选中文本相同的文本框起来
readOnly: 是否只读，设置只读之后，不可编辑
cursorStyle： 光标样式"ace"|"slim"|"smooth"|"wide"
mergeUndoDeltas: 合并撤销，修改内容之后，撤销之后，撤销内容的多少不同

https://www.jianshu.com/p/25fe3bf7ae4d