react-ace
Version:
A react component for Ace Editor
89 lines (78 loc) • 15.9 kB
Markdown
This is the main component of React-Ace. It creates an instance of the Ace Editor.
http://securingsincity.github.io/react-ace/
```javascript
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 }}
setOptions={{
enableBasicAutocompletion: true,
enableLiveAutocompletion: true,
enableSnippets: true
}}
/>,
document.getElementById("example")
);
```
| Prop | Default | Type | Description |
| ------------------------- | ------------ | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| name | 'ace-editor' | String | Unique Id to be used for the editor |
| placeholder | null | String | Placeholder text to be displayed when editor is empty |
| mode | '' | String | Language for parsing and code highlighting |
| theme | '' | String | theme to use |
| value | '' | String | value you want to populate in the code highlighter |
| defaultValue | '' | String | Default value of the editor |
| height | '500px' | String | CSS value for height |
| width | '500px' | String | CSS value for width |
| className | | String | custom className |
| fontSize | 12 | Number | pixel value for font-size |
| showGutter | true | Boolean | show gutter |
| showPrintMargin | true | Boolean | show print margin |
| highlightActiveLine | true | Boolean | highlight active line |
| focus | false | Boolean | whether to focus |
| cursorStart | 1 | Number | the location of the cursor |
| wrapEnabled | false | Boolean | Wrapping lines |
| readOnly | false | Boolean | make the editor read only |
| minLines | | Number | Minimum number of lines to be displayed |
| maxLines | | Number | Maximum number of lines to be displayed |
| enableBasicAutocompletion | false | Boolean | Enable basic autocompletion |
| enableLiveAutocompletion | false | Boolean | Enable live autocompletion |
| enableSnippets | false | Boolean | Enable snippets |
| tabSize | 4 | Number | tabSize |
| debounceChangePeriod | null | Number | A debounce delay period for the onChange event |
| onLoad | | Function | called on editor load. The first argument is the instance of the editor |
| onBeforeLoad | | Function | called before editor load. the first argument is an instance of `ace` |
| onChange | | Function | occurs on document change it has 2 arguments the value and the event. |
| onCopy | | Function | triggered by editor `copy` event, and passes text as argument |
| onPaste | | Function | Triggered by editor `paste` event, and passes text as argument |
| onSelectionChange | | Function | triggered by editor `selectionChange` event, and passes a [Selection](https://ace.c9.io/#nav=api&api=selection) as it's first argument and the event as the second |
| onCursorChange | | Function | triggered by editor `changeCursor` event, and passes a [Selection](https://ace.c9.io/#nav=api&api=selection) as it's first argument and the event as the second |
| onFocus | | Function | triggered by editor `focus` event |
| onBlur | | Function | triggered by editor `blur` event.It has two arguments event and editor |
| onInput | | Function | triggered by editor `input` event |
| onScroll | | Function | triggered by editor `scroll` event |
| onValidate | | Function | triggered, when annotations are changed |
| editorProps | | Object | properties to apply directly to the Ace editor instance |
| setOptions | | Object | [options](https://github.com/ajaxorg/ace/wiki/Configuring-Ace) to apply directly to the Ace editor instance |
| keyboardHandler | | String | corresponding to the keybinding mode to set (such as vim or emacs) |
| commands | | Array | new commands to add to the editor |
| annotations | | Array | annotations to show in the editor i.e. `[{ row: 0, column: 2, type: 'error', text: 'Some error.'}]`, displayed in the gutter.(type:'error','info','warning') |
| markers | | Array | [markers](https://ace.c9.io/#nav=api&api=edit_session) to show in the editor, i.e. `[{ startRow: 0, startCol: 2, endRow: 1, endCol: 20, className: 'error-marker', type: 'background' }]`. Make sure to define the class (eg. ".error-marker") and set `position: absolute` for it. |
| style | | Object | camelCased properties |