| 1 | # Split Editor
|
| 2 |
|
| 3 | This allows for a split editor which can create multiple linked instances of the Ace editor. Each instance shares a theme and other properties while having their own value.
|
| 4 |
|
| 5 | ## Demo
|
| 6 |
|
| 7 | http://securingsincity.github.io/react-ace/split.html
|
| 8 |
|
| 9 | ## Example Code
|
| 10 |
|
| 11 | ```javascript
|
| 12 | import React from "react";
|
| 13 | import { render } from "react-dom";
|
| 14 |
|
| 15 | import { split as SplitEditor } from "react-ace";
|
| 16 |
|
| 17 | import "ace-builds/src-noconflict/mode-java";
|
| 18 | import "ace-builds/src-noconflict/theme-github";
|
| 19 |
|
| 20 | // Render editor
|
| 21 | render(
|
| 22 | <SplitEditor
|
| 23 | mode="java"
|
| 24 | theme="github"
|
| 25 | splits={2}
|
| 26 | orientation="below"
|
| 27 | value={["hi", "hello"]}
|
| 28 | name="UNIQUE_ID_OF_DIV"
|
| 29 | editorProps={{ $blockScrolling: true }}
|
| 30 | />,
|
| 31 | document.getElementById("example")
|
| 32 | );
|
| 33 | ```
|
| 34 |
|
| 35 | ## Available Props
|
| 36 |
|
| 37 | | Prop | Default | Type | Description |
|
| 38 | | ------------------------- | ------------ | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
| 39 | | name | 'ace-editor' | String | Unique Id to be used for the editor |
|
| 40 | | mode | '' | String | Language for parsing and code highlighting |
|
| 41 | | splits | 2 | Number | Number of views to have |
|
| 42 | | orientation | 'beside' | String | The orientation of the splits either `beside` or `below` |
|
| 43 | | theme | '' | String | theme to use |
|
| 44 | | value | '' | Array of Strings | value you want to populate in each code editor |
|
| 45 | | defaultValue | '' | Array of Strings | Default value for each editor |
|
| 46 | | height | '500px' | String | CSS value for height |
|
| 47 | | width | '500px' | String | CSS value for width |
|
| 48 | | className | | String | custom className |
|
| 49 | | fontSize | 12 | Number | pixel value for font-size |
|
| 50 | | showGutter | true | Boolean | show gutter |
|
| 51 | | showPrintMargin | true | Boolean | show print margin |
|
| 52 | | highlightActiveLine | true | Boolean | highlight active line |
|
| 53 | | focus | false | Boolean | whether to focus |
|
| 54 | | cursorStart | 1 | Number | the location of the cursor |
|
| 55 | | wrapEnabled | false | Boolean | Wrapping lines |
|
| 56 | | readOnly | false | Boolean | make the editor read only |
|
| 57 | | minLines | | Number | Minimum number of lines to be displayed |
|
| 58 | | maxLines | | Number | Maximum number of lines to be displayed |
|
| 59 | | enableBasicAutocompletion | false | Boolean | Enable basic autocompletion |
|
| 60 | | enableLiveAutocompletion | false | Boolean | Enable live autocompletion |
|
| 61 | | tabSize | 4 | Number | tabSize |
|
| 62 | | debounceChangePeriod | null | Number | A debounce delay period for the onChange event |
|
| 63 | | onLoad | | Function | called on editor load. The first argument is the instance of the editor |
|
| 64 | | onBeforeLoad | | Function | called before editor load. the first argument is an instance of `ace` |
|
| 65 | | onChange | | Function | occurs on document change it has 2 arguments the value of each editor and the event. |
|
| 66 | | onCopy | | Function | triggered by editor `copy` event, and passes text as argument |
|
| 67 | | onPaste | | Function | Triggered by editor `paste` event, and passes text as argument |
|
| 68 | | 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 |
|
| 69 | | 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 |
|
| 70 | | onFocus | | Function | triggered by editor `focus` event |
|
| 71 | | onBlur | | Function | triggered by editor `blur` event |
|
| 72 | | onInput | | Function | triggered by editor `input` event |
|
| 73 | | onScroll | | Function | triggered by editor `scroll` event |
|
| 74 | | editorProps | | Object | properties to apply directly to the Ace editor instance |
|
| 75 | | setOptions | | Object | [options](https://github.com/ajaxorg/ace/wiki/Configuring-Ace) to apply directly to the Ace editor instance |
|
| 76 | | keyboardHandler | | String | corresponding to the keybinding mode to set (such as vim or emacs) |
|
| 77 | | commands | | Array | new commands to add to the editor |
|
| 78 | | annotations | | Array of Arrays | annotations to show in the editor i.e. `[{ row: 0, column: 2, type: 'error', text: 'Some error.'}]`, displayed in the gutter |
|
| 79 | | markers | | Array of Arrays | [markers](https://ace.c9.io/api/edit_session.html#EditSession.addMarker) to show in the editor, i.e. `[{ startRow: 0, startCol: 2, endRow: 1, endCol: 20, className: 'error-marker', type: 'background' }]` |
|
| 80 | | style | | Object | camelCased properties |
|