react 代码编辑器react-ace

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

posted @ 2022-09-29 14:35  Running00  阅读(1275)  评论(0编辑  收藏  举报