CodeMirror Code Editor Extension for Redux Framework

CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with a number of language modes and addons that implement more advanced editing functionality.

A rich programming API and a CSS theming system are available for customizing CodeMirror to fit your application, and extending it with new functionality.

Features

Many other methods and addons…

Browser support

The desktop versions of the following browsers, in standards mode (HTML5 recommended) are supported:

Modern mobile browsers tend to partly work. Bug reports and patches for mobile support are welcome, but the - maintainer does not have the time or budget to actually work on it himself.

Basic Usage

The basic Codemirror Editor for Redux Framework is added like the other fields with this parameters:

    'fields' => array(
    array(
        'id' => "codemirror",
        'type' => "codemirror",
        'title' => __("Code Editor CSS", 'redux-framework-demo'),
        'compiler' => 'true',
        'subtitle' => __('Dummy Subtitle', 'redux-framework-demo'),
        'editor_options' => array(
            "mode" => "css",
            "addon" => array("foldcode-css","activeline"),
            "theme" => "monokai",
            "lint" => true,
            "hint" => true,
            "autohint" => true
        )
    ),
    .
    .
    .
id
(string) The standard “id” field as in other fields, which makes the field unique.
type
(string) This tells the framework that this field is a “codemirror” editor field.
title
(string) The title shown before the field.
compiler
(boolean) Whether to activate the compiler hook or not.
subtitle
(string) Description text under the field title.
editor_options

(array) contains the options that defines the properties of the editor.

mode
(string/array) defines the editor mode like CSS,Javascript, CoffeeScript, Markdown etc. For available modes see Language Modes section of this document.
addon
(array) defines the editor’s addons like search, markselection, rulers etc. For available addons, refer to Add-ons section of this document.
theme
(string) defines the editor’s color scheme. Available themes can be found in the Themes section.
lint
(boolean) enables the lint for the mode specified in mode option. If any linter is available for this mode, it’ll add gutters nearby the line numbers and tells you what’s wrong about your code.
hint
(boolean) enables the autocomplete feature for the mode specified.
If any autocomplete list is available for the selected mode, the editor will show a combobox filled with appropiate values for you. If the autohint mode is set to false, the trigger of this autocomplete combobox is Ctrl+Space.
autolint
(boolean) sets the autocomplete to show on every key stroke in the editor box. You don’t have to use Ctrl+Space every time you want to autocomplete the code, just writing a few letters would make you code faster.

Language Modes

This is a list of every mode in the distribution. Each mode lives in a subdirectory of the mode/ directory, and typically defines a single JavaScript file that implements the mode. Loading such file will make the language available to CodeMirror, through the mode option. This extension has the autoloading feature of those files, which searches for defined mode directory and autoloads neccessary files.

APL
(mode:apl)
Asterisk dialplan
(mode:asterisk)
C, C++, C#
(mode:clike)
Clojure
(mode:clojure)
COBOL
(mode:cobol)
CoffeeScript
(mode:coffeescript)
Common Lisp
(mode:commonlisp)
CSS
(mode:css)
Cython
(mode:phyton)
D
(mode:d)
diff
(mode:diff)
DTD
(mode:dtd)
ECL
(mode:ecl)
Eiffel
(mode:eiffel)
Erlang
(mode:erlang)
Fortran
(mode:fortran)
F#
(mode:mllike)
Gas (AT&T-style assembly)
(mode:gas)
Gherkin
(mode:gherkin)
Go
(mode:go)
Groovy
(mode:groovy)
HAML
(mode:haml)
Haskell
(mode:haskell)
Haxe
(mode:haxe)
HTTP
(mode:http)
Java
(mode:clike)
Jade
(mode:jade)
JavaScript
(mode:javascript)
Jinja2
(mode:jinja2)
Julia
(mode:julia)
LESS
(mode:less)
LiveScript
(mode:livescript)
Markdown (GitHub-flavour)
(mode:markdown)
mIRC
(mode:mirc)
Nginx
(mode:nginx)
NTriples
(mode:ntriples)
OCaml
(mode:mllike)
Octave (MATLAB)
(mode:octave)
Pascal
(mode:pascal)
PEG.js
(mode:pegjs)
Perl
(mode:perl)
PHP
(mode:php)
Pig Latin
(mode:pig)
Properties files
(mode:properties)
Puppet
(mode:puppet)
Python
(mode:phyton)
Q
(mode:q)
R
(mode:r)
RPM spec and changelog
(mode:rpm)
reStructuredText
(mode:rst)
Ruby
(mode:ruby)
Rust
(mode:rust)
Sass
(mode:sass)
Scala
(mode:clike)
Scheme
(mode:scheme)
SCSS
(mode:css)
Shell
(mode:shell)
Sieve
(mode:sieve)
Smalltalk
(mode:smalltalk)
Smarty
(mode:smarty)
Smarty/HTML mixed
(mode:smartymixed)
Solr
(mode:solr)
SQL (several dialects)
(mode:sql)
SPARQL
(mode:sparql)
sTeX, LaTeX
(mode:stex)
Tcl
(mode:tcl)
Tiddlywiki
(mode:tiddlywiki)
Tiki wiki
(mode:tiki)
TOML
(mode:toml)
Turtle
(mode:turtle)
VB.NET
(mode:vb)
VBScript
(mode:vbscript)
Velocity
(mode:velocity)
Verilog
(mode:verilog)
XML/HTML
(mode:xml)
XQuery
(mode:xquery)
YAML
(mode:yaml)
Z80
(mode:z80)

Themes


3024-day

3024-night

ambiance

base16-dark

base16-light

blackboard

cobalt

eclipse

elegant

erlang-dark

lesser-dark

mbo

mdn-like

midnight

monokai

neat

night

paraiso-dark

paraiso-light

Add-ons

activeline

Displays active line in different style.
Demo page for this addon in Codemirror Official Site.

closebrackets

Auto closes [],{},'',"" brackets inside the editor when typed.
Demo page for this addon in Codemirror Official Site.

closetag

Auto closes xml tags if the editor has an xml compatible mode like HTML.
Demo page for this addon in Codemirror Official Site.

continuelist

If this add-on is active in the markdown mode, when user presses the Enter key while typing a markdown list, the editor automatically indents the new line to the markdown definition list’s left margin.
Demo page for this addon in Codemirror Official Site.

foldcode-comment

Adds folding feature to gutter for multiline comments.

foldcode-css

Adds folding feature to gutter for CSS brackets.

foldcode-html

Adds folding feature to gutter for matched XML like tags.
Demo page for this addon in Codemirror Official Site.

foldcode-indent

Adds folding feature to gutter for the lines that have the same indent level.

foldcode-js

Adds folding feature to gutter curly brace matches in Javascript (and likes).
Demo page for this addon in Codemirror Official Site.

foldcode-markdown

Adds folding feature to gutter for markdown mode.
Demo page for this addon in Codemirror Official Site.

fullscreen

Adds a fullscreen feature which will switch to fullscreen when F11 key is pressed inside the editor.
Demo page for this addon in Codemirror Official Site.

markselection

Adds a different styling to the selected text in the editor.
Demo page for this addon in Codemirror Official Site.

matchbrackets

Highlights the matching bracket couples mentioned in closebrackets addon when clicked on one of them inside the editor.

matchhighlights

Highlights the same words as which the user selects in the editor.
Demo page for this addon in Codemirror Official Site.

matchtags

Highlights the same tags as the tag that user selected.
Demo page for this addon in Codemirror Official Site.

placeholder

if a placeholder property is defined in the field’s property list (outside editor_options array), this text will be shown in the editor as a placeholder text for the user.
Demo page for this addon in Codemirror Official Site.

rulers

Displays an user-defined ruler on the editor. If you wonder how to define a ruler set, have a look at addons/display/default-ruler.js file, and feel free to modify that script to suit your needs. Also the styling resides in addons/display/default-rulers.css file.
Demo page for this addon in Codemirror Official Site.

search

Adds a function to the key Ctrl+F to show a dialog for searching the editor content.
Demo page for this addon in Codemirror Official Site.

trailingspace

Styles the trailing spaces with the style defined in addons/edit/trailingspace.css.
Demo page for this addon in Codemirror Official Site.

CodeMirror Community for developers

CodeMirror is an open-source project shared under an MIT license. It is the editor used in the dev tools for both Firefox and Chrome, Light Table, Adobe Brackets, Bitbucket, and many other projects.

Development and bug tracking happens on github (alternate git repository). Please read these pointers before submitting a bug. Use pull requests to submit patches. All contributions must be released under the same MIT license that CodeMirror uses.

Discussion around the project is done on a mailing list. There is also the codemirror-announce list, which is only used for major announcements (such as new versions). If needed, you can contact the maintainer directly.

A list of CodeMirror-related software that is not part of the main distribution is maintained on our wiki. Feel free to add your project.