A field for editing code in the SilverStripe CMS using Ace Editor (

Installs: 45 236

Dependents: 6

Suggesters: 1

Security: 0

Stars: 25

Watchers: 3

Forks: 12

Open Issues: 6



1.3.1 2017-07-27 01:01 UTC

This package is not auto-updated.

Last update: 2024-05-09 13:17:51 UTC


This module adds a CodeEditorField that uses Ace Editor ( to let you edit code (mostly HTML or JavaScript). Try it out here. It comes in two forms:

  • A regular CodeEditorField that can be used on an HTMLText field similar to HTMLEditorField
  • An optional replacement code view for TinyMCE that uses a CodeEditorField

Maintainer Contacts

Nathan Cox (


  • SilverStripe 3.1+



Installation Instructions

  1. Place the files in a directory called codeeditorfield in the root of your SilverStripe installation. You can most easily do this with composer require nathancox/codeeditorfield
  2. Configure your site's config.yml to define your defaults (optional).
  3. Visit to rebuild the database

Usage Overview

Configuration via config.yml:

Name: codeeditorfield

    # These are the pre-defined defaults for dark/light themes
    default_dark_theme: 'monokai'
    default_light_theme: 'github'
    # This will overwrite the above settings
    default_theme: 'tomorrow'

Using CodeEditorField in getCMSFields:

$fields->addFieldToTab('Root.Content', $codeField = new CodeEditorField('Configuration', 'Configuration'));
// set the field to use the full width of the CMS (optional, not included in screenshot)

// set the height of the field (defaults to 8)

// set the syntax mode to yaml (defaults to html)

// optional - set theme (see codeeditorfield/thirdparty/ace/src-noconflict/theme-xxx.js files for available themes)

produces the following:

example codeeditorfield

Note: If you opt not to set default_theme and don't set the theme specifically on the field, you will have the option to toggle between Dark and Light.

To replace the code editor in TinyMCE:

// copy this into your project's getCMSFields

	'aceeditor' => sprintf('../../../codeeditorfield/javascript/tinymce/editor_plugin_src.js')
HtmlEditorConfig::get('cms')->insertButtonsBefore('fullscreen', 'aceeditor');

Known Issues

Issue Tracker