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.，而封装后可以避免这个问题。

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	驼峰属性