This module adds a CodeEditorField that uses Ace Editor (http://ace.c9.io/) to let you edit code (mostly HTML or JavaScript). I 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
Nathan Cox (me@nathan.net.nz)
- SilverStripe 3.1+
- Place the files in a directory called codeeditorfield in the root of your SilverStripe installation
- Visit yoursite.com/dev/build to rebuild the database
Using CodeEditorField in getCMSFields:
$fields->addFieldToTab('Root.Content', $codeField = new CodeEditorField('ExtraTags', 'Extra tags'));
$codeField->addExtraClass('stacked');
// set the height of the field (defaults to 8)
$codeField->setRows(15);
// set the syntax mode to javascript (defaults to html)
$codeField->setMode('javascript');
// optional - set theme (see codeeditorfield/thirdparty/ace/src-noconflict/theme-xxx.js files for available themes)
$codeField->setTheme('twilight');produces
Replace the code editor in TinyMCE:
// copy this into your project's getCMSFields (you can find this code in codeeditorfield/_config.php)
HtmlEditorConfig::get('cms')->enablePlugins(array(
'aceeditor' => sprintf('../../../codeeditorfield/javascript/tinymce/editor_plugin_src.js')
));
HtmlEditorConfig::get('cms')->insertButtonsBefore('fullscreen', 'aceeditor');
HtmlEditorConfig::get('cms')->removeButtons('code');