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:
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.