简介
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.,而封装后可以避免这个问题。
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";
import "ace-builds/src-noconflict/ext-language_tools";
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:false
}}
// onLoad = {(editor)=>{
// console.log(editor) //onLoad 的第一个参数是编辑器实例
//}}
// commands= {[{ //键盘指令
// name:'saveFile',
// bindKey:{win:'Ctrl-S',mac:'Command-S'}
// exec:()=>{
// console.log('saveFile')
//}
//}]}
//debounceChangePeriod = {500} // 防抖时间
/>)
}
<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 | 驼峰属性 |