react-ace 的简单应用


简介

Ace是一个用JavaScript编写的可嵌入代码编辑器。它与Sublime，Vim和TextMate等本机编辑器的功能和性能相匹配。它可以轻松地嵌入任何网页和JavaScript应用程序中，React-Ace是Ace 的react 封装版本，使用简单，方便配合form表单使用。

安装

npm install react-ace ace-builds
或者
yarn add react-ace ace-builds
注：官方已经停止了对Brace的支持！

简单封装一个Ace-editor，封装的原因：1、组件复用 ，2、兼容ant design 的form.getFieldDecorator，

解释一下为什么说兼容ant design 的form.getFieldDecorator，

如果不封装组件，直接使用AceEditor组件，会导致编辑器与form 设置value会冲突 ，出现报错
Warning: getFieldDecorator will override value, so please don’t set value directly and use setFieldsValue to set it.，而封装后可以避免这个问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import AceEditor from "react-ace";
import "ace-builds/src-noconflict/mode-sh";
import "ace-builds/src-noconflict/mode-python";
import "ace-builds/src-noconflict/theme-monokai";

export default (props)=>{
    const {mode,height,width,name,placeholder,value,onChange} = props;
    return (
    <AceEditor
    width={width||'500px'}
    height={height||'300px'}
    mode={mode||'sh'}
    theme='monokai'
    placeholder={placeholder || ''}
    onChange={onChange}
    name={name||'ace-editor'}
    value={value}
    editorProps={{ $blockScrolling: true }}
    fontSize='14px'
    showGutter = {true}
    highlightActiveLine = {true}
    showPrintMargin = {false}
    setOptions = {{
    enableBasicAutocompletion:true,
    enableLiveAutocompletion:true,
    enableSnippets:true
    }}
   // onLoad = {(editor)=>{
        // console.log(editor)  //onLoad 的第一个参数是编辑器实例
    //}}
   // commands= {[{    //键盘指令
    //  name:'saveFile',
    //  bindKey:{win:'Ctrl-S',mac:'Command-S'}  
    //  exec:()=>{
    //      console.log('saveFile')
//}
//}]}
    //debounceChangePeriod = {500} // 防抖时间
  />)
}

1
2
3
4
5
6
7
8
9
10
11
12
13
     <Form labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
        <FormItem
        label="控制内容"
      >
        {getFieldDecorator('script', {
          rules: [{ required: true, message: '控制内容' }],
        })(<AceEditor
          mode='sh'
          width='100%'
          height='400px'
        />)}
        </FormItem>
      </Form>
编辑器属性
Prop Default Type Description
name ‘ace-editor’ String 用于编辑器的唯一ID
mode ‘’ String 解析和代码突出显示的语言
splits 2 Number 视图拆分
orientation ‘beside’ String 拆分的方向在旁边还是在下面
theme ‘’ String 使用的主题
value ‘’ Array of Strings 设置值
defaultValue ‘’ Array of Strings 每个编辑器的默认值
height ‘500px’ String 高度的CSS值
width ‘500px’ String 宽度的CSS值
className String 自定义类名
fontSize 12 Number 字体大小的像素值
showGutter true Boolean 显示槽
showPrintMargin true Boolean 显示打印边距
highlightActiveLine true Boolean 突出显示活动行
focus false Boolean 是否聚焦
cursorStart 1 Number 光标的位置
wrapEnabled false Boolean 包装线
readOnly false Boolean 使编辑器为只读
minLines Number 显示的最小行数
maxLines Number 显示的最大行数
enableBasicAutocompletion false Boolean 启用基本自动补全
enableLiveAutocompletion false Boolean 启用实时自动补全
enableSnippets false Boolean 启用摘要
tabSize 4 Number tab空格值
debounceChangePeriod null Number onChange事件的抖动延迟时间
onLoad Function 在编辑器加载时调用。第一个参数是编辑器的实例
onBeforeLoad Function 在编辑器加载之前调用。第一个参数是的实例ace
onChange Function 发生在文档更改上，它具有2个参数，每个编辑器的值和事件
onCopy Function 由编辑器copy事件触发，并将文本作为参数传递
onPaste Function 由编辑器paste事件触发，并将文本作为参数传递
onSelectionChange Function 由编辑器selectionChange事件触发，并且将Selection作为第一个参数传递，并将事件作为第二个参数传递
onCursorChange Function 由编辑器changeCursor事件触发，并且将Selection作为第一个参数传递，并将事件作为第二个参数传递
onFocus Function 由编辑器focus事件触发
onBlur Function 由编辑器blur事件触发
onInput Function 由编辑器input事件触发
onScroll Function 由编辑器scroll事件触发
editorProps Object 可直接应用于Ace编辑器实例的属性
setOptions Object 直接应用于Ace编辑器实例的选项
keyboardHandler String 对应于要设置的绑定模式（例如vim或emacs）
commands Array 新命令添加到编辑器
annotations Array of Arrays 要在编辑器中[{ row: 0, column: 2, type: ‘error’, text: ‘Some error.’}]显示的注释，即在装订线中显示
markers Array of Arrays 要在编辑器中显示的标记，即[{ startRow: 0, startCol: 2, endRow: 1, endCol: 20, className: ‘error-marker’, type: ‘background’ }]
style Object 驼峰属性