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
- default:
-
theme
: Highlighting theme. Options includelight
anddark
- default:
light
- default:
-
minLines
: When provided, the editor will have a minimum line height- default:
null
- default:
-
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
- default:
-
readOnly
: Whether or not the text is made editable.- default:
false
when the container is atextarea
,true
when it is not (pre
ordiv
)
- default:
-
gutter
: Whether or not to show line numbers and other left-aligned elements- default:
true
- default:
-
wordWrap
: Whether or not to wrap long lines- default:
false
- default:
-
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
- default:
-
sourceComparison
: When provided, uses a diff view- default:
null
- default:
-
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
- default:
-
left
: function which is called upon left cursor navigation in the editor. Returning false disables default cursor movement.- default:
null
- default:
-
right
: function which is called upon right cursor navigation in the editor. Returning false disables default cursor movement.- default:
null
- default:
-
up
: function which is called upon up cursor navigation in the editor. Returning false disables default cursor movement.- default:
null
- default:
-
down
: function which is called upon down cursor navigation in the editor. Returning false disables default cursor movement.- default:
null
- default:
-
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
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)