Straker Interactive

Extending the TinyMCE editor in ShadoCMS

In ShadoCMS 7.6.1 and above, you can customize and extend the TinyMCE WYSIWYG editor used for editing container content.

When a container is being edited, the addContainer2Page function makes a call to the showEditor() function of /shadomx/apps/editor/tinymce/editor.cfc.

To customize the TinyMCE editor, you can use the following code and save it as /[Your Site Name]/app_config/util/editor/inc_editor_init.cfm. Once the inc_editor_init.cfm file is available to the showEditor() function, the function executes the code in the file to setup the TinyMCE editor.

<cfoutput>

                <script language="javascript" type="text/javascript">
                    /* resizing functions start */
                    function setupContentCallback(editor_id,body,doc) {

                        // sort out any cftags
                        body.innerHTML = body.innerHTML.replace(/<cf/gi, '<cf');
                        resizeMCE(editor_id);
                    }

                    function resizeMCE(editor_id) {
                        editor = document.getElementById(editor_id);
                        if (editor) {
                            editor.style.height = #stEditorSize.height#;
                            editor.style.width = '100%';
                        }
                    }
                    /* resizing functions end */

                    tinyMCE.init({
                                    mode                                 : "exact",
                                    elements                             : "content",
                                    theme                                 : "shado",
                                    plugins                             : "#sPlugins#",
                                    theme_shado_buttons1_add             : "#stButtons.row1#",
                                    theme_shado_buttons2_add             : "#stButtons.row2#",
                                    theme_shado_buttons3_add             : "#stButtons.row3#",
                                    theme_shado_buttons3_add_before     : "",
                                    theme_shado_toolbar_location         : "top",
                                    theme_shado_toolbar_align             : "left",
                                    theme_shado_statusbar_location         : "bottom",
                                    content_css                         : "#arguments.content_stylesheet#",
                                    theme_shado_toolbar_location         : "#arguments.toolbar_location#",
                                    theme_shado_toolbar_align             : "#arguments.toolbar_align#",
                                    width                                 : '100%',
                                    height                                : 200,
                                    verify_html                            : false,
                                    relative_urls                        : false,
                                    debug                                : #arguments.debug#,
                                    setupcontent_callback                : "setupContentCallback",
                                    content_css_viewer                    : "#arguments.content_stylesheet_viewer#",
                                    entity_encoding                     : "named"
                                });

                </script>

</cfoutput>

The code above has available to it the following variables:

arguments: a structure containing all the arguments passed to showEditor() function

sPlugins: a list of plugins retrieved from <plugins> node in /[Your Site Name]/app_config/util/editor/editors.xml

stButtons: a structure of all the buttons available. This is retrieved from the <row> node in /[Your Site Name]/app_config/util/editor/editors.xml

Customizing TinyMCE initialization parameters

The TinyMCE editor can be configured to use different parameters when it is initalized. For example, you can apply different modes, or use different themes, etc. More information on what each of the parameters in the init() call to TinyMCE is available on the TinyMCE website.

Creating TinyMCE theme

The default TinyMCE editor in ShadoCMS uses the "shado" theme. The files for the "shado" theme live at: /shadomx/apps/editor/tinymce/tinymce/jscripts/tiny_mce/themes/shado.

You can write your own themes by following these instructions.

Creating TinyMCE Plugins

There are five plugins that were written specifically for ShadoCMS:

- shadoeditorsize: Resizes the TinyMCE editor window

- shadofms: Inserts digital assets into containers using the File Management System (FMS)

- shadolink: Links text inside a container to parts of site tree, URLs and emails ids

- shadospell: Spell checker

- shadostyleviewer: Displays styles used in a site's stylesheet

The location of the plugins is: /shadomx/apps/editor/tinymce/tinymce/jscripts/tiny_mce/plugins.

You can write your own plugins by following these instructions.

UPDATE (19 May 2008): If you are using ShadoCMS 7.6.1, you would need to apply HotFix 23 for ShadoCMS 7.6.1. This is available in the Support section.

Comments

I tried changing the include file under our Shado 7.6.1 and it had no effect. This is a shame, as I'd really like to be able to customize the editor.

# Posted by: Chris Simmons | 02 May 2008 | 06:40 AM

Hi Chris,

You need to apply 7.6.1 hotfix23 to your shadomx before you customize the TinyMCE editor. You can download that hotfix from our supprot section.

Cheers Bing

# Posted by: Bing Li | 19 May 2008 | 01:33 AM

Thanks! That worked.

ta

Chris

# Posted by: Chris Simmons | 20 May 2008 | 04:58 AM