Going beyond Content Style Templates with CKEditor WSYSIWYG

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.
3/19/2013 10:08:02 AM
Gravatar
Total Posts 28

Going beyond Content Style Templates with CKEditor WSYSIWYG

Hi Joe,

I had a quick question about whether it was possible or not to show an instance's styles within the CKEditor WSYSIWYG. I suppose I'm wondering if it goes beyond content style templates and would allow a user to see how that instance is laid out stylistically. For example, the WSYSIWYG would show how divs are positioned, etc.

I've looked into this issue quite a bit, but haven't had much success in finding an answer other than to check out CKEditor's div-based editor on its site. I'm not sure if that can be enabled within mojoPortal somehow, or if there is some other control I'm not seeing.

Thank you. As always, your help is appreciated.

 

3/21/2013 9:43:41 AM
Gravatar
Total Posts 18439

Re: Going beyond Content Style Templates with CKEditor WSYSIWYG

The problem is that when using an editor the content is loaded into an iframe and does not have the context of the surrounding elements and their classes that it would have in the actual page content. So if it gets is styles from classes on the parent elements and those parent elements are not part of the editor content then those styles are not applied in the editor.

So for example if you had a css rule like

.modulecontent p {font-size:20px; }

the problem is that when the content is in the editor it is not surrounded by a div with the class modulecontent but when it is in the actual page it is surrounded by the div with that class and the style is therefore applied in the actual page but not in the editor.

You can compensate for it by adding styles to help make the editor content look the same. The editor iframe has a simple html wrapper around the content but it has a class <body class="wysiwygeditor"

​So for example if you want to make use the same large font in the editor as in the css rule above you can add another css selector that will apply the same style. ie:

body.wysiwygeditor p, .modulecontent p { font-size:20px; }

2 selectors separated by a comma using 1 style rule for both selectors.

Hope that helps,

Joe

3/26/2013 2:51:03 PM
Gravatar
Total Posts 28

Re: Going beyond Content Style Templates with CKEditor WSYSIWYG

Thanks, Joe. I appreciate the help.

3/26/2013 4:22:23 PM
Gravatar
Total Posts 18439

Re: Going beyond Content Style Templates with CKEditor WSYSIWYG

This thread got me thinking about this problem and it occurred to me just now that it would be useful to have a way for people to configure the css class that is on the body element in the editor and that it would be pretty easy to make that possible. That way given the previous example there would be no need to add the extra selector for the editor because you could configure the class as "modulecontent". So I implemented it since it was easy and tested the idea using Artisteer skins which have a container class art-postcontent and sure enough it made the editor content look more correct ie Artisteer has some bullet styles that now appear in the editor that did not appear before.

After the next release of mojoPortal this will be possible to configure this from the theme.skin file, I'll document how to do it then or feel free to remind if you don't see any documentation about it after the next release.

Thanks,

Joe

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