{"id":1009,"date":"2011-05-04T09:36:00","date_gmt":"2011-05-04T09:36:00","guid":{"rendered":"http:\/\/blogs.sussex.ac.uk\/elearningteam\/?p=1009"},"modified":"2011-05-04T09:58:10","modified_gmt":"2011-05-04T09:58:10","slug":"making-your-wysiwyg-content-look-the-same-when-editing-as-when-published","status":"publish","type":"post","link":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/2011\/05\/04\/making-your-wysiwyg-content-look-the-same-when-editing-as-when-published\/","title":{"rendered":"Making your WYSIWYG content look the same when editing as when published"},"content":{"rendered":"

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.<\/p>\n

Making the WYSIWYG editor content look the same as when its publish is something we did a while back in moodle. People at moodlemootuk2011<\/a> showed an interest in\u00a0implementing\u00a0in their moodle installs, so here is how we did it.<\/p>\n

Here is a screenshot of \u00a0the WYSIWYG editor in our moodle1.9 with some sample text :<\/p>\n

\"\"<\/a><\/p>\n

And here is the same content when published :<\/p>\n

\"\"<\/a><\/p>\n

As you can see Headings, paragraphs, lists, italic, bold and all other\u00a0semantic\u00a0text elements have the same\u00a0formatting\u00a0in the editor, as when they apear in the published web page.<\/p>\n

If your trying to achieve nice looking content and don’t have this\u00a0correlation\u00a0it can easily lead to a lot of\u00a0frustration\u00a0and confusion from users.<\/p>\n

CSS<\/h3>\n

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…<\/p>\n

Lets call this file text.css<\/p>\n

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\u00a0consistency\u00a0across your site.<\/p>\n

e.g. in the config.php we include the layout.css and the text.css<\/p>\n

$THEME->sheets = array('layout','text');<\/code><\/p>\n

In the WYSIWYG editor<\/h3>\n

Now you just need to include this text style sheet in the WYSIWYG editor iframe.<\/p>\n

In lib\/editor\/htmlarea.php set the path to your theme and the text.css<\/p>\n

$theme_css = \"$CFG->wwwroot\/theme\/$theme\/text_style.css\"; \/\/ theme css text styles<\/code><\/p>\n

find the comment\u00a0\/\/ Generate iframe content and in the javascript add echo your theme text styles into the iframe header<\/p>\n

<style type=\"text\/css\">@import \"<?php echo $sussex_css;?>\";<\/code><\/p>\n

n.b. moodle2 \u00a0uses the standard Tinymce WYSIWYG editor. For anyone familiar with this, just follow the <\/em>normal\u00a0Tinymce method for adding editing styles<\/a><\/em>, or\u00a0in the moodle version of Tinymce look for $contentcss and add your theme text.css there.<\/em><\/p>\n

Now any changes you make to your text.css in a theme will be reflected on the site and in the WYSIWYG editor.<\/p>\n","protected":false},"excerpt":{"rendered":"

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. […]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[64,70],"tags":[76,21,127],"_links":{"self":[{"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/posts\/1009"}],"collection":[{"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/comments?post=1009"}],"version-history":[{"count":7,"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/posts\/1009\/revisions"}],"predecessor-version":[{"id":1019,"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/posts\/1009\/revisions\/1019"}],"wp:attachment":[{"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/media?parent=1009"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/categories?post=1009"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/tags?post=1009"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}