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.

There are a fixed set of pre-defined named toolbars, the items in those toolbars can be configured as described below depending on the editor in use. You will see the names within those configuration files, the names are

• Full
• FullWithTemplates
• Forum
• ForumWithImages
• AnonymousUser,
• SimpleWithSource
• Newsletter
• Custom1
• Custom2

For developers these names correspond to an enum for setting the toolbar on an editor within a custom feature, though the strings used for these enums may be slightly different within a specific editor. To learn how to configure an editor in a custom feature you can study the code for existing features that use the editors. For example in the Html content feature in the HtmlEdit.aspx.cs, we set the toolbar like this:

edContent.WebEditor.ToolBar = ToolBar.FullWithTemplates;

TinyMCE Configuration

To configure toolbars and plugins for TinyMCE, copy the file mojoTinyMCE4.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="mojoTinyMCE4.config" />  

The file is an xml file that can be edited with a text editor and you can configure plugins and toolbar items as supported by TinyMCE. 

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 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" />

 

RAD Editor by Telerik

See mojoRadGlue for information about integrating RAD Editor in mojoPortal