13 KiB
title: Rich-text editing (WYSIWYG) summary: SilverStripe's use and configuration of TinyMCE html editor.
Rich-text editing (WYSIWYG)
Editing and formatting content is the bread and butter of every content management system, which is why SilverStripe has a tight integration with our preferred editor library, TinyMCE.
On top of the base functionality, we use our own insertion dialogs to ensure you can effectively select and upload files. In addition to the markup managed by TinyMCE, we use shortcodes to store information about inserted images or media elements.
The framework comes with a [api:HTMLEditorField] form field class which encapsulates most of the required functionality. It is usually added through the [api:DataObject::getCMSFields()] method:
mysite/code/MyObject.php
:::php
<?php
class MyObject extends DataObject {
private static $db = array(
'Content' => 'HTMLText'
);
public function getCMSFields() {
return new FieldList(
new HTMLEditorField('Content')
);
}
}
Configuration
To keep the JavaScript editor configuration manageable and extensible, we've wrapped it in a PHP class called
[api:HtmlEditorConfig]. The class comes with its own defaults, which are extended through the Configuration API
in the framework (and the cms
module in case you've got that installed).
There can be multiple configs, which should always be created / accessed using [api:HtmlEditorConfig::get()]. You can
then set the currently active config using set_active()
.
Adding and removing capabilities
In its simplest form, the configuration of the editor includes adding and removing buttons and plugins.
You can add plugins to the editor using the Framework's [api:HtmlEditorConfig::enablePlugins()] method. This will transparently generate the relevant underlying TinyMCE code.
mysite/_config.php :::php HtmlEditorConfig::get('cms')->enablePlugins('media');
Plugins and advanced themes can provide additional buttons that can be added (or removed) through the
configuration. Here is an example of adding a ssmacron
button after the charmap
button:
mysite/_config.php :::php HtmlEditorConfig::get('cms')->insertButtonsAfter('charmap', 'ssmacron');
Buttons can also be removed:
mysite/_config.php :::php HtmlEditorConfig::get('cms')->removeButtons('tablecontrols', 'blockquote', 'hr');
Setting options
TinyMCE behaviour can be affected through its configuration options. These options will be passed straight to the editor.
One example of the usage of this capability is to redefine the TinyMCE's whitelist of HTML tags - the tags that will not be stripped from the HTML source by the editor.
mysite/_config.php :::php // Add start and type attributes for
- , add