evolutionCodeEditor jQuery Plugin

jQuery.fn.evolutionCodeEditor

This plugin enables a body of text to be rendered and optionally editable with syntax highlighting supporting a variety of programming languages.

When editable (readOnly option value of false is set) then methods for setting and retrieving the value along with events for handling changes are available. When the underlying selector is a textarea, readOnly is automatically assumed to be false, and the textarea's content is updated as the editor updates, along with native change events triggered on the textarea. Additionally, CSS classes defined on the textarea are transferred to the editor except for other ui-component classes.

evolutionCodeEditor() can be called on a single element more than once to update its options.

Usage

Initializes the selected container to render its text via a syntax highlighter

$(selector).evolutionCodeEditor(options)

Options

• mode: Syntax highlighting mode. Options include actionscript, applescript, batchfile, clojure, cobol, coffee, coldfusion, csharp, css, curly, d, dart, diff, dockerfile, erlang, golang, html, java, javascript, json, jsp, latex, less, lisp, lua, makefile, markdown, nix, objectivec, ocaml, pascal, perl, pgsql, php, powershell, praat, python, rhtml, ruby, rust, sass, scala, sql, sqlserver, text, typescript, velocity, xml, xquery, yaml
  • default: text
• theme: Highlighting theme. Options include light and dark
  • default: light
• minLines: When provided, the editor will have a minimum line height
  • default: null
• maxLines: When provided, the editor will have a maximum line height. This also triggers auto-resizing, up to maxLines. Scrolling is used beyond maxLines.
  • default: null
• readOnly: Whether or not the text is made editable.
  • default: false when the container is a textarea, true when it is not (pre or div)
• gutter: Whether or not to show line numbers and other left-aligned elements
  • default: true
• wordWrap: Whether or not to wrap long lines
  • default: false
• enableFullScreen: Whether or not to support full screen toggling. When native HTML full screen is available, it is used. Otherwise, the editor is maximized the size of the browser when not contained within an iframe.
  • default: true
• sourceComparison: When provided, uses a diff view
  • default: null
• autoComplete: When specified, includes snippet autocompletion as well as suggestions. When passed a function that returns a promised array of autocompletions, included with other completions.
  • default: null
• left: function which is called upon left cursor navigation in the editor. Returning false disables default cursor movement.
  • default: null
• right: function which is called upon right cursor navigation in the editor. Returning false disables default cursor movement.
  • default: null
• up: function which is called upon up cursor navigation in the editor. Returning false disables default cursor movement.
  • default: null
• down: function which is called upon down cursor navigation in the editor. Returning false disables default cursor movement.
  • default: null
• line: line number to focus on
  • default: null
• commandOverrides: Shorcut key combination overrides. Object of key combination strings with function handlers. Handlers returning true still run the matching ACE-defined command.
  • default: null

Methods

val

Retrieves and/or sets the current value of the editor.

// Returns the current value
var value = $(selector).evolutionCodeEditor('val')

// Sets the value
$(selector).evolutionCodeEditor('val', newString)

focus

Retrieves and/or sets whether the editor is focused

// Returns the focus
var isFocused = $(selector).evolutionCodeEditor('focus')

// Sets the focus
$(selector).evolutionCodeEditor('focus', true)

fullscreen

Retrieves and/or sets the full screen state

// Returns the current full screen state
var isFullScreen = $(selector).evolutionCodeEditor('fullscreen')

// Sets the full screen state
$(selector).evolutionCodeEditor('fullscreen', true)

See also

• Code UI Component
• evolutionCodeEditorChange jQuery Event

line

Gets or Sets the line number

// Sets the line number
$(selector).evolutionCodeEditor('line', lineNumber)

wordWrap

Gets or Sets word wrapping enablement

// Enables word wrapping
$(selector).evolutionCodeEditor('wordWrap', true)

scrollTop

Retrieves and/or sets the current scroll offset of the editor.

// Returns the current value
var top = $(selector).evolutionCodeEditor('scrollTop')

// Sets the value
$(selector).evolutionCodeEditor('scrollTop', 50)