# ACE Editor

The ACE Editor field offers the ability to edit back-end code in an easy to use and easy to read embedded interface.  In addition to matching the features of native code editors such as Sublime Text(opens new window) , Vim(opens new window) and TextMate(opens new window) , ACE offers real-time checking for code accuracy.

# Arguments

Array containing the content and optional title arguments for the hint tooltip.

Name Type Default Description
type string ace_editor Value identifying the field type.
mode string javascript Sets the language mode of the editor. Accepts: css html javascript json less markdown mysql php plain_text sass scss text xml
theme string monokai Sets the theme of the editor. Accepts: chrome or monokai
options array
array(
  'minLines' => 12,
  'maxLines' => 30
)
Pass any option to the Ace Editor object. For more details visit: http://ace.c9.io/ and the Configuring Ace Wiki.

# Build Config

Build a Custom Configuration →
Changes you make to this form will be reflected in the generated code.
Field visibility requirements.

Redux::set_field( 'OPT_NAME', 'SECTION_ID', array(
    'type' => 'ace_editor'
) );

# Example Config

Redux::addField( 'OPT_NAME', 'SECTION_ID', array(
    'id'       => 'css_editor',
    'type'     => 'ace_editor',
    'title'    => __('CSS Code', 'redux-framework-demo'),
    'subtitle' => __('Paste your CSS code here.', 'redux-framework-demo'),
    'mode'     => 'css',
    'theme'    => 'monokai',
    'desc'     => 'Possible modes can be found at http://ace.c9.io/.',
    'default'  => "#header{\nmargin: 0 auto;\n}"
) );

# Example Usage

This example in based on the example usage provided above. Be sure to change $redux_demo to the value you specified in your opt_name argument.

global $redux_demo;

echo 'ACE Editor output: ' . $redux_demo['css-editor'];