DOWNLOAD DEMO
Current Version: 2.3.9.7 2013-04-30
Need a hand? Join the community.

Customizing the Editor Toolbars

Overview

The reason we don't include the font face, font-size, and text color/background color toolbar items in the editor is because it is contrary to the notion of having a skinnable site. If you use those toolbar items you are hard coding fonts, sizes and colors into your content making them un-skinnable. You may pick fonts and colors that look good with your current skin but a year from now when you decide to re-design the look of the site those fonts and colors you hard coded into the content using these toolbars may look ugly and now you have a big job to do to clean that up to make it look right with your new skin design. So, its a bad practice to use those toolbar items that hard code any kind of style into your content. It is much wiser to use only css classes and let the fonts and colors be decided in the css files. This way the entire look and feel of your site can be changed with one click by changing to a different skin. mojoPortal uses specific toolbar names in all the editors, so you can't change names of the toolbars or add arbitrary ones but you can customize what is on those toolbars. As an alternative to hard coding styles we've implemented a content style template system so that you can define some pre-set styles in CSS and make it easy for users to use those styles from the WYSIWYG editor. 

TinyMCE Configuration

To configure toolbars and plugins for TinyMCE, copy the file mojoTinyMCE.config from the root of the web site. Rename your copy, then change this setting in Web.config/user.config to point to your custom file.
<add key="TinyMCE:ConfigFile" value="mojoTinyMCE.config" />  

The file is an xml file that can be edited with a text editor. 

CKeditor Configuration

To customize CKeditor, copy the file from yoursiteroot/ClientScript/ckeditor-mojoconfig.js, rename your custom copy, then point to your custom file using this Web.config/user.config setting.

<add key="CKEditor:ConfigPath" value="~/ClientScript/ckeditor-mojoconfig.js" />

Note:

In both CKeditor and in FCKeditor we have mapped h1 to h3, h2 to h4, and h3 to h5. The reason we've done that is to help users who don't know about html to create the right kind of headings. Since the site title is generally an h1 and the content instance title is an h2, it makes more sense that headings within the content should start at h3. However if you don't like this behavior you can override it by adding these in your user.config file and changing the mappings:

<add key="CKEditorH1Mapping" value="h3" />
<add key="CKEditorH2Mapping" value="h4" />
<add key="CKEditorH3Mapping" value="h5" />

FCKeditor Configuration

In mojoPortal the FCKeditor configuration file is at /ClientsScript/mojofckconfig.js file. However I don't recommend customizing that file directly. Instead, copy it and rename it and then change this setting to the new file. You will find this in Web.config but ideally you will override it in user.config

<add key="FCKeditor:CustomConfigPath" value="~/ClientScript/mojofckconfig.js" />

If you were to just customize mojofckconfig.js directly, you would likely lose your customizations next time you upgrade because the new file would replace the old one. By using your own custom named file you can avoid this.

RAD Editor by Telerik

See mojoRadGlue for information about integrating RAD Editor in mojoPortal