For any content author there is nothing worse than applying formatting in a WYSIWYG editor, and then finding it all looks different when they publish it. This applies to our tutors in moodle too.
Making the WYSIWYG editor content look the same as when its publish is something we did a while back in moodle. People at moodlemootuk2011 showed an interest in implementing in their moodle installs, so here is how we did it.
Here is a screenshot of the WYSIWYG editor in our moodle1.9 with some sample text :
And here is the same content when published :
As you can see Headings, paragraphs, lists, italic, bold and all other semantic text elements have the same formatting in the editor, as when they apear in the published web page.
If your trying to achieve nice looking content and don’t have this correlation it can easily lead to a lot of frustration and confusion from users.
CSS
In your theme you need a css file which has all your styles which apply to text e.g. h1,h2,p,ul,ol, a, small, strong, em, sub, sup etc…
Lets call this file text.css
It’s good practice to take all these text/font styles out of the main theme style sheet, and include this text.css in your theme. That way when you edit the text.css it maintains consistency across your site.
e.g. in the config.php we include the layout.css and the text.css
$THEME->sheets = array('layout','text');
In the WYSIWYG editor
Now you just need to include this text style sheet in the WYSIWYG editor iframe.
In lib/editor/htmlarea.php set the path to your theme and the text.css
$theme_css = "$CFG->wwwroot/theme/$theme/text_style.css"; // theme css text styles
find the comment // Generate iframe content and in the javascript add echo your theme text styles into the iframe header
<style type="text/css">@import "<?php echo $sussex_css;?>";
n.b. moodle2 uses the standard Tinymce WYSIWYG editor. For anyone familiar with this, just follow the normal Tinymce method for adding editing styles, or in the moodle version of Tinymce look for $contentcss and add your theme text.css there.
Now any changes you make to your text.css in a theme will be reflected on the site and in the WYSIWYG editor.