Redux

# 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.

Table of Contents

# 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.

Also See

# 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::set_field( 'OPT_NAME', 'SECTION_ID', array(
    'id'       => 'css_editor',
    'type'     => 'ace_editor',
    'title'    => esc_html__('CSS Code', 'your-project-name'),
    'subtitle' => esc_html__('Paste your CSS code here.', 'your-project-name'),
    'mode'     => 'css',
    'theme'    => 'monokai',
    'desc'     => 'Possible modes can be found at https://ace.c9.io/.',
    'default'  => "#header{\nmargin: 0 auto;\n}"
) );

# Example Usage

This example is based on the code 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'];

Background →