Code Editor – ACF Extended

Field Render

Display a code editor area using the built-in WP Core Codemirror library. Multiple languages highlights are available: Text/HTML, Javascript, CSS, PHP mixed & PHP plain.

Field Group

Code Editor

Field Settings

Setting name	Description
Default Value	Appears when creating a new post
Placeholder	Appears within the input
Editor mode	Code highlight type
Show Lines	Whether to show line numbers to the left of the editor
Indent Unit	How many spaces a block (whatever that means in the edited language) should be indented
Character Limit	Leave blank for no limit
Rows	Sets the textarea height
Max rows	Sets the textarea max height

Field Value

Value can then be retrieved using the common get_field() function. The returned data are decoded HTML entities. Usage example:

$code_editor = get_field('code_editor');

/*
 * <div class="my-class">
 *     <p>Lorem ipsum dolor sit amet.</p>
 *     <p>Praesent sapien massa, convallis.</p>
 * </div>
 *
 * <div class="my-class-2">
 *     <p>Lorem ipsum dolor sit amet.</p>
 *     <p>Praesent sapien massa, convallis.</p>
 * </div>
 */

Field Groups Field Settings Fields

Advanced Link Block Types PRO Button Checkbox Clone Code Editor Columns Date Picker PRO Date Time Picker PRO Dynamic Message Field Groups PRO Field Types PRO Fields PRO File PRO Flexible Content Forms Google Map PRO Google reCaptcha Group Hidden Input Image Menu Locations PRO Menus PRO Options Pages PRO Post Field PRO Post Object PRO Post Statuses Post Types Radio Relationship PRO Select Slug Tab PRO Taxonomies Taxonomy Terms Templates PRO Textarea Time Picker PRO User Roles WYSIWYG Editor PRO

Modules WordPress Hooks & Helpers