The big option list for ace editor

index.html

<div id="myeditor" class="editor"></div>
<div id="output"></div>

script.js

var editor = ace.edit('myeditor');
// Default value is the first one in comments
// All options are set to default value
editor.setOptions({
  // editor options
  selectionStyle: 'line',// "line"|"text"
  highlightActiveLine: true, // boolean
  highlightSelectedWord: true, // boolean
  readOnly: false, // boolean: true if read only
  cursorStyle: 'ace', // "ace"|"slim"|"smooth"|"wide"
  mergeUndoDeltas: true, // false|true|"always"
  behavioursEnabled: true, // boolean: true if enable custom behaviours
  wrapBehavioursEnabled: true, // boolean
  autoScrollEditorIntoView: undefined, // boolean: this is needed if editor is inside scrollable page
  keyboardHandler: null, // function: handle custom keyboard events
  
  // renderer options
  animatedScroll: false, // boolean: true if scroll should be animated
  displayIndentGuides: false, // boolean: true if the indent should be shown. See 'showInvisibles'
  showInvisibles: false, // boolean -> displayIndentGuides: true if show the invisible tabs/spaces in indents
  showPrintMargin: true, // boolean: true if show the vertical print margin
  printMarginColumn: 80, // number: number of columns for vertical print margin
  printMargin: undefined, // boolean | number: showPrintMargin | printMarginColumn
  showGutter: true, // boolean: true if show line gutter
  fadeFoldWidgets: false, // boolean: true if the fold lines should be faded
  showFoldWidgets: true, // boolean: true if the fold lines should be shown ?
  showLineNumbers: true,
  highlightGutterLine: false, // boolean: true if the gutter line should be highlighted
  hScrollBarAlwaysVisible: false, // boolean: true if the horizontal scroll bar should be shown regardless
  vScrollBarAlwaysVisible: false, // boolean: true if the vertical scroll bar should be shown regardless
  fontSize: 12, // number | string: set the font size to this many pixels
  fontFamily: undefined, // string: set the font-family css value
  maxLines: undefined, // number: set the maximum lines possible. This will make the editor height changes
  minLines: undefined, // number: set the minimum lines possible. This will make the editor height changes
  maxPixelHeight: 0, // number -> maxLines: set the maximum height in pixel, when 'maxLines' is defined. 
  scrollPastEnd: 0, // number -> !maxLines: if positive, user can scroll pass the last line and go n * editorHeight more distance 
  fixedWidthGutter: false, // boolean: true if the gutter should be fixed width
  theme: 'ace/theme/textmate', // theme string from ace/theme or custom?
 
  // mouseHandler options
  scrollSpeed: 2, // number: the scroll speed index
  dragDelay: 0, // number: the drag delay before drag starts. it's 150ms for mac by default 
  dragEnabled: true, // boolean: enable dragging
  focusTimout: 0, // number: the focus delay before focus starts.
  tooltipFollowsMouse: true, // boolean: true if the gutter tooltip should follow mouse

  // session options
  firstLineNumber: 1, // number: the line number in first line
  overwrite: false, // boolean
  newLineMode: 'auto', // "auto" | "unix" | "windows"
  useWorker: true, // boolean: true if use web worker for loading scripts
  useSoftTabs: true, // boolean: true if we want to use spaces than tabs
  tabSize: 4, // number
  wrap: false, // boolean | string | number: true/'free' means wrap instead of horizontal scroll, false/'off' means horizontal scroll instead of wrap, and number means number of column before wrap. -1 means wrap at print margin
  indentedSoftWrap: true, // boolean
  foldStyle: 'markbegin', // enum: 'manual'/'markbegin'/'markbeginend'.
  mode: 'ace/mode/html' // string: path to language mode 
});

scripts

<script src="https://rawgit.com/ajaxorg/ace-builds/812e2c56aed246931a667f16c28b096e34597016/src-min-noconflict/ace.js"></script>
<script src="https://rawgit.com/ajaxorg/ace-builds/812e2c56aed246931a667f16c28b096e34597016/src-min-noconflict/ext-language_tools.js"></script>

style.css

.editor {
  border: 1px solid;
}

#myeditor {
  height: 200px;
}

the-big-option-list-for-ace-editor.markdown

The big option list for ace editor

A Pen by ZyMaWy B bOy on CodePen.

License.