SilverStripe CodeEditorField
This module adds a CodeEditorField that uses Ace Editor (http://ace.c9.io/) 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 ([email protected])
Requirements
- SilverStripe 3.1+
Documentation
Installation Instructions
- 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 - Configure your site's
config.ymlto define your defaults (optional). - Visit yoursite.com/dev/build to rebuild the database
Usage Overview
Configuration via config.yml:
---
Name: codeeditorfield
---
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)
$codeField->addExtraClass('stacked');
// set the height of the field (defaults to 8)
$codeField->setRows(30);
// set the syntax mode to yaml (defaults to html)
$codeField->setMode('yaml');
// optional - set theme (see codeeditorfield/thirdparty/ace/src-noconflict/theme-xxx.js files for available themes)
$codeField->setTheme('twilight');
produces the following:
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
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');
15 Oct 28, 2022
1 Dec 14, 2022
4 Feb 14, 2022
13.6k Dec 24, 2022
10.8k Dec 30, 2022
4.1k Dec 27, 2022
42 Nov 24, 2022
2.6k Dec 26, 2022
5 Sep 22, 2022
67 Oct 20, 2022
2 Sep 8, 2021
6 Dec 29, 2021
4 Aug 22, 2022
5 Nov 11, 2021
6 Dec 29, 2021
331 Nov 22, 2022
973 Dec 27, 2022
7 Sep 12, 2022
47 Dec 3, 2022