Customizing the TinyMCE Module in CMS Made Simple

CMS Made Simple Beyond the Basics – Customizing TinyMCE

A level of comfort sets in when using a familiar product the same way for a long time. Sometimes, trying a new method will interrupt a productive workflow because of subtle changes and the time it takes to learn the new system. But, I did it; I gave it a try.

When the CMS Made Simple dev team decided to stop using the TinyMCE module as the official WYSIWYG editor included in the installation package, I tried its replacement. My clients tried the replacement. Unfortunately, the MicroTiny module lacks features that content editors need to use on a regular basis. TinyMCE still remains my favorite because of the file management tools and extend-ability.

The TinyMCE module can be downloaded from the development Forge by visiting, http://dev.cmsmadesimple.org/projects/tinymce.

This article will introduce a few ways to customize the TinyMCE module to make it a WYSIWYG superhero for your next project.

~Custom Dropdown~

CMS Made Simple TinyMCE customdropdown

When editing the module’s settings, go to the Advanced tab to modify advanced features like the Custom Dropdown.  This advanced setting can include rules to insert text content, HTML content, plugins, and variables into the TinyMCE content area.

There are two options provided as examples: “Insert CMS version info” and “Insert Smarty {literal} around selection”. I remove the first one because I haven’t heard of a content editor having to insert the version information into a web page.

The second option is useful if your content editor will insert Javascript or other code that that uses curly brackets ( { } ). Most editors will not use this option unless there is a need to include Javascript in the middle of a page or if they are writing technical content.

Note, pipe characters ( | ) and quotes ( ‘ ” ) cannot be used or it will cause a conflict. Custom Dropdown rules use a pipe character to separate the snippet’s text from the actual snippet action.

"Insert Something Cool|{Insert_This_Cool_Tag}"
|__dropdown option__|___action inserted___|

Therefore, smarty plugin modifiers like, lower, upper, replace, truncate, etc., cannot be used.  And, tag parameters cannot be enclosed in quotes.

Illegal: {$some_var|lower}
Illegal: {some_plugin id="1"} and {some_plugin id='1'}
Legal: {some_plugin id=1}

One obvious use is to provide a list of module plugins that can be inserted into content. For example, if we want to make it easy for an editor to insert News articles, we can add this line to the Custom Dropdown:

Insert News|{news number=10}

Global Content Blocks can be added to the dropdown list. For example:

Insert Social Share Links|{global_content name=socialsharing}

All of the usual CMS Made Simple template tags are also available to use. For example, a dropdown option can be made available for {sitename}, {title}, and {root_url}.

User Defined Tags (UDT) can also be used. For example, if you have a UDT that grabs a random advertisement banner from your uploads directory, an editor can easily add it to their content from the Custom Dropdown feature:

Insert Arvixe Hosting Banner|{RandomBannerAd category=arvixe}

The possibilities are endless for this useful feature.

~Extra Configuration~

The TinyMCE module offers further customization with the Extra Configuration settings. This area can be used to add additional TinyMCE configuration options to override its default behavior. For more information about TinyMCE configurations, visit http://www.tinymce.com/wiki.php/Configuration3x.

When using a stand alone installation of TinyMCE, these extra configurations would be written into the tinyMCE.init() Javascript call. Instead, we can use this CMSMS module’s insightful feature to keep the module’s integrity intact. Let’s take a look at a some examples.

Allowing the iframe element.

TinyMCE doesn’t include the iframe element and it is removed when content is saved. Use the following snippet to make an iframe a valid TinyMCE element:

extended_valid_elements : "iframe[marginheight|id|frameborder|scrolling|align|marginwidth|name|id|src|height|width|sandbox|allowtransparency]"

Note the following:
1) The snippet uses the “extended_valid_elements” configuration option. This will add to TinyMCE’s valid elements.
2) Any of the element’s attributes need to be added to the configuration setting if they might be used in the editor.

Adding HTML 5 Section as a valid element.

We can add new HTML 5 elements to the list of valid elements. For example, to add the section element:

extended_valid_elements : "section[class|id|style|title]"

Special Note:
When combining more than one rule in the Extra Configuration setting, each rule needs to be separated by a comma. The TinyMCE module states, “One statement per line” which is not exactly correct because each statement must be separated by a comma:

extended_valid_elements : "iframe[marginheight|id|frameborder|scrolling|align|marginwidth|name|id|src|height|width|sandbox|allowtransparency]"
,extended_valid_elements : "section[class|id|style|title]"

Override default font size values.

TinyMCE sets font sizes with relative name properties instead of a font size measurement. For example, a font size of 12px would be set as medium by TinyMCE.

To change how TinyMCE sets font sizes:

theme_advanced_font_sizes : "9px=9px, 10px=10px, 11px=11px, 12px=12px, 14px=14px, 15px=15px, 16px=16px,17px=17px,18px=18px,19px=19px,20px=20px"

~Additions to stylesheet~

One request often made by content editors is that they want the content they enter into TinyMCE to look the same as it is styled on the actual web page. I suggest that any WYSIWYG editor should be only used as a representation of how the content will look on a web page. However, there are a few things that you can do to help make the content in the editor look similar.

The default settings show a rule to give some left margin for all list items:

li {
margin-left : 16px;
}

You can add other CSS rules here to help make the editor’s content look similar to your front end. Choose CSS rules that affect the font face being used, link color and decoration, paragraph padding, and classes that will be used in the editor. Enter in CSS the same as you would in any CSS file.

For more information and TinyMCE tips and tricks, visit the CMS Made Simple forums search and ask questions there or at the CMS Made Simple discussion board at arvixe.com.


Looking for quality CMS Made Simple Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , | Posted under CMS Made Simple | RSS 2.0

Author Spotlight

JohnnyB

JohnnyB

I've been a full-time front-end web developer for nine years working with design and marketing agencies and businesses located all over the USA. CMS Made Simple has been my go-to Content Management System since mid 2006.

Leave a Reply

Your email address will not be published. Required fields are marked *


5 − 1 =

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>