Add Styles to CKEditor

If you have questions about using mojoPortal, you can post them here.

You may want to first review our site administration documentation to see if your question is answered there.

This thread is closed to new posts. You must sign in to post in the forums.
6/5/2014 12:35:13 PM
Gravatar
Total Posts 4

Add Styles to CKEditor

I have created Content Style Templates for Heading 1 to Heading 6 which accomplishes what I want to do but only Heading 1 thru Heading 4 are listed in the Styles dropdown. I have tried adding them to the styles.js in ClientScript/ckeditor42 but that didnt work.

How are the remaining Headings added?

I am running  version 2.3.9.8 MSSQL with CKEditor selected as the content editor.

Thanks for the help!

 

6/5/2014 1:15:12 PM
Gravatar
Total Posts 18439

Re: Add Styles to CKEditor

Hi,

The thing to understand is that generally the site title has h1 and the title of a content instance has h2, so really within the content we usually only want to use h3, h4, h5. As discussed in the article Customizing the Editor Toolbars we actually are mapping the h1 - h3 as h3-h5 since most end users don't know much about html, though you can override this if you really wanted to.

I should note also though that though that article shows web.config/user.config settings for those mappings, in the latest source code we stopped using those settings and just do the mapping from ckeditor-mojoconfig.js so it will work a little different in the next release and overriding it will mean overriding the path to that js file so it points to your own custom version of it.

Style templates are a different thing, if you create a style template for the element h3, that style element will only be available in the style dropdown when you have selected an h3 element in the editor. It is useful for adding a css class to the selected element.

Hope that helps,

Joe

6/5/2014 1:56:25 PM
Gravatar
Total Posts 4

Re: Add Styles to CKEditor

I understand everything that you have mentioned. What i was really trying to accomplish for example was to get the color for the h5 class from the style sheet to display "Heading 5" in that same color in the dropdown so that the user can see the color before applying it to the text in the editor. It seems the CKEditor only lists 4 Styles whereas the TinyMCE editor lists 6 and they are the colors of the classes in the stylesheet. Is it possible to add more styles to the CKEditor?

Thanks,

Hopefully this is not making it more confusing.

6/5/2014 2:31:07 PM
Gravatar
Total Posts 18439

Re: Add Styles to CKEditor

both CKeditor and TinyMCE should show the same set of style templates I think.

you are running an older version so you might play around on our demo site to see if things may be working better as there have been frequent updates to the editors and our integration code between your version and the current version of mojoPortal.  I just updated our demo site recently to the latest build from the mojoportal repository and it is using the latest version of CKeditor so it is even more up to date than our current release package.

You must sign in to post in the forums. This thread is closed to new posts.