Custom Styles in TinyMCE

TinyMCE comes with the ability to add custom styles.  To add custom Styles to Rhythmyx, they must be added to the configuration file being used by TinyMCE.

default_config.json present in the rx_resources/tinymce/js/config directory is used by default as the configuration file for TinyMCE.  For more information on custom configuration files, please read: Role Based Configuration of TinyMCE.

Styles and classes are implemented in JSON Array format like so:

"style_formats": [
{"title": "MyFormats", "items": [
{"title": "myblueformat", "block": "p", "styles": { "color": "blue" } },

{"title": "myredclass", "block": "div", "classes": "myclass"}


]}
]

Here is an example on how to integrate custom styles into the configuration file:

Example config.json
[
{

"config_css": "../rx_resources/tinymce/tinymce1.css",
"plugins": [
"advlist autolink lists link charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor",
"noneditable rxinline"
],
"relative_urls": false,
"remove_script_host" : false,
"valid_elements": "*[*]",
"style_formats": [
{"title": "Other", "items": [
{"title": "mycustomformat", "block": "div", "styles": { "color": "red" } }
]}
]



},
{
"roles" : ["Admin"],

"config_css": "../rx_resources/tinymce/tinymce1.css",
"plugins": [
"advlist autolink lists link charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor",
"noneditable rxinline"
],
"relative_urls": false,
"remove_script_host" : false,
"style_formats": [
{"title": "My Custom formats", "items": [
{"title": "My Custom Format", "block": "div", "styles": { "color": "red" } }
]}
]

}
]

 

This example should output in TinyMCE as such:

custom format

Configurations are role based, so ensure the custom styles they are also present under that role's configurations.

Also, to see custom classes inside the editor, also include that class into {Rhythmyx_root}\rx_resources\tinymce\tinymce1.css .

View TinyMCE's example of implementing custom styles for additional information on how to set up your custom style.

Note: For installations prior to the 7.3.2 12/28 patch, you will need to add 

"style_formats_merge": true

into the configuration file being used in order for the styles to be picked up.