Making the WYSIWYG editor really WYSIWYG

Making the WYSIWYG editor really WYSIWYG

by Tim Hunt -
Number of replies: 24
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

This is something I fixed ages ago in the OU theme, and we really ought to do the same in the standard Moodle Themes.

Most themes have an editor.css file, which is used to style the content inside TinyMCE. In an ideal world, this would contain all the basic CSS that the theme uses for common bits of HTML like headings, paragraphs and lists, etc. so that what you type in the editor looks exactly like it will look for real.

It is a relatively simple but boring job to do that for all the standard themes. I am afraid I am not volunteering to do it myself, at least not now. I just thought I woudl highlight it here in the hope of inspiring someone else to do it.

See also https://moodle.org/mod/forum/discuss.php?d=217300.

Average of ratings: -
In reply to Tim Hunt

Re: Making the WYSIWYG editor really WYSIWYG

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

I've been wanting to do this, but never got any feedback...it's like banging your head against a brick wall sometimes.

MDL-35051

Average of ratings: -
In reply to Mary Evans

Re: Making the WYSIWYG editor really WYSIWYG

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

Ah great! well at least that issue now has one vote smile

The code you wanted comments on seems to have gone AWOL. At least, there is no longler a Pull master diff URL. I am now watching the bug, so if you manage to post updated code, I will see, and will try to peer review it. Thanks.

Average of ratings: -
In reply to Tim Hunt

Re: Making the WYSIWYG editor really WYSIWYG

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Tim,

I deleted that branch in a fit of madness! LOL

I'll create another branch on master and use the standard theme editor.css.

Thanks

Mary

Average of ratings: -
In reply to Tim Hunt

Re: Making the WYSIWYG editor really WYSIWYG

by David Scotson -
I generated an editor.css file for my bootstrap theme, but could never get it to be picked up by the editor. Is there some trick to it?

I know you have to specify it in the theme config, anything eles you need to do?
Average of ratings: -
In reply to David Scotson

Re: Making the WYSIWYG editor really WYSIWYG

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

David,

The editor.css is not in the config.php in CORE themes, hence my suggestion to ADD it so that the style used in the editor are carried through into the theme.

The editor.css is supposed to be picked up by TinyMCE, at least that is what we are led to believe.  I am not sure how it works, perhaps Tim might enlighten us. smile

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Making the WYSIWYG editor really WYSIWYG

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

I have just been looking at the code to try to work out how it works.

Let us use brick theme as an example, which says:

$THEME->parents = array('canvas','base');

So, first Moodle looks in theme/base/config.php, where it says

$THEME->editor_sheets = array('editor');

So theme/base/styles/editor.css will be used.

theme/canvas/config.php says 

$THEME->editor_sheets = array('editor');

So theme/canvas/styles/editor.css will be used.

theme/brick/config.php does not set editor_sheets, so there are no additional files from there.

So, theme/base/styles/editor.css and theme/canvas/styles/editor.css are joined together (in that order, so rules in canvas overwrite similar rules in base), and that is the CSS that is used in the editor.

As has already been pointed out, TinyMCE also sends its own CSS, and there is nothing we can do about that. Where TinyMCE's CSS does something we don't like, we have to override it with our own rule. Our CSS takes priority over TinyMCEs.

Average of ratings: -
In reply to Tim Hunt

Re: Making the WYSIWYG editor really WYSIWYG

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

I forgot $THEME->editor_sheets = array('editor');

was in config.php blush

Average of ratings: -
In reply to David Scotson

Re: Making the WYSIWYG editor really WYSIWYG

by David Scotson -
After taking a second look it appears to be picked up now, but is being partly overwritten by a file called content.css (which among other things makes some of the text 10 pixels high). Where is that coming from? Part of TinyMCE itself?

On a similar subject can you edit anything else about TinyMCE without hacking core Moodle? The insert and cancel buttons being on the wrong sides keeps catching me out. I'd love to replace the font list with something more semantic too.
Average of ratings: -
In reply to David Scotson

Re: Making the WYSIWYG editor really WYSIWYG

by David Scotson -
It looks like this gets included by TinyMCE so you have to make sure your rules overrule this (or edit it) if you want your styles to come through:

from lib/editor/tinymce/tiny_mce/3.5.1.1/themes/advanced/skins/o2k7/content.css

Though on my first go at editing it (removing everything not specifically marked .mceWhatever) I couldn't get the changes to register, which reminds me of when I was trying to get editor.css to work in the first place. Anyone know how to force this file to refresh?

A quick Google gave me this:

"Note: updating the actual content.css will have no effect. You need to create a copy and reference it in tinyMCE.init()" Anyone know where to do this for Moodle? I'm guessing that's where you can make all sort of other changes to TinyMCE.

 

body, td, pre {color:#000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; margin:8px;}

body {background:#FFF;}

body.mceForceColors {background:#FFF; color:#000;}

h1 {font-size: 2em}

h2 {font-size: 1.5em}

h3 {font-size: 1.17em}

h4 {font-size: 1em}

h5 {font-size: .83em}

h6 {font-size: .75em}

.mceItemTable, .mceItemTable td, .mceItemTable th, .mceItemTable caption, .mceItemVisualAid {border: 1px dashed #BBB;}

a.mceItemAnchor {display:inline-block; width:11px !important; height:11px  !important; background:url(../default/img/items.gif) no-repeat 0 0;}

span.mceItemNbsp {background: #DDD}

td.mceSelected, th.mceSelected {background-color:#3399ff !important}

img {border:0;}

table, img, hr, .mceItemAnchor {cursor:default}

table td, table th {cursor:text}

ins {border-bottom:1px solid green; text-decoration: none; color:green}

del {color:red; text-decoration:line-through}

cite {border-bottom:1px dashed blue}

acronym {border-bottom:1px dotted #CCC; cursor:help}

abbr {border-bottom:1px dashed #CCC; cursor:help}



/* IE */

* html body {

scrollbar-3dlight-color:#F0F0EE;

scrollbar-arrow-color:#676662;

scrollbar-base-color:#F0F0EE;

scrollbar-darkshadow-color:#DDD;

scrollbar-face-color:#E0E0DD;

scrollbar-highlight-color:#F0F0EE;

scrollbar-shadow-color:#F0F0EE;

scrollbar-track-color:#F5F5F5;

}



img:-moz-broken {-moz-force-broken-image-icon:1; width:24px; height:24px}

font[face=mceinline] {font-family:inherit !important}

*[contentEditable]:focus {outline:0}



.mceItemMedia {border:1px dotted #cc0000; background-position:center; background-repeat:no-repeat; background-color:#ffffcc}

.mceItemShockWave {background-image:url(../../img/shockwave.gif)}

.mceItemFlash {background-image:url(../../img/flash.gif)}

.mceItemQuickTime {background-image:url(../../img/quicktime.gif)}

.mceItemWindowsMedia {background-image:url(../../img/windowsmedia.gif)}

.mceItemRealMedia {background-image:url(../../img/realmedia.gif)}

.mceItemVideo {background-image:url(../../img/video.gif)}

.mceItemAudio {background-image:url(../../img/video.gif)}

.mceItemIframe {background-image:url(../../img/iframe.gif)}

.mcePageBreak {display:block;border:0;width:100%;height:12px;border-top:1px dotted #ccc;margin-top:15px;background:#fff url(../../img/pagebreak.gif) no-repeat center top;}

.mceHideBrInPre pre br {display: none}
Average of ratings: -
In reply to David Scotson

Re: Making the WYSIWYG editor really WYSIWYG

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Not sure what you are talking about and what things you have been changing. But if Purge caches does not help, then try deleting the cache from your Moodledata folder manually. There is a a cache folder inside Moodledata which contains lots of sub-directories each of which can be deleted.

Mary

Average of ratings: -
In reply to David Scotson

Re: Making the WYSIWYG editor really WYSIWYG

by David Scotson -
To answer one of my own questions, you can change a couple of things about TinyMCE in the settings page:

/admin/settings.php?section=editorsettingstinymce

One is the spellchecking engine and languages, the other is the fonts.

Do you think anyone would be interested in updating the Moodle defaults to something a bit more 21st century?

For example, Bootstrap's default fonts (which I think are one of their weaker areas, but still...) are, in Moodle settings format:

 

Sans-Serif="Helvetica Neue", Helvetica, Arial, sans-serif;

Serif=Georgia, "Times New Roman", Times, serif;

Monospaced=Monaco, Menlo, Consolas, "Courier New", monospace;
Average of ratings: -
In reply to David Scotson

Re: Making the WYSIWYG editor really WYSIWYG

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Hi David,

You have a lot more settings for the TinyMCE in Moodle2.4 as well, including customising the toolbars and what appears on them.

This time last year I did quite a lot of work on TinyMCE to provide a differentiated toolbar (students and staff got one basic set of tools - essentially Moodle's default set without HTML which I'd been asked to prevent some users having access to! admins got everything TinyMCE had to offer) and also making use of the TinyMCE templates feature to provide a set of default templates for things like assignment briefs, tutor/student meetings and so on. All of this had to be done through the TinyMCE code though - and I still haven't found a way from the front end to make use of the templates - you have to, as far as I can see, create the templates and store them in a folder in the TinyMCE directory and then reference them in the TinyMCE code itself (please correct me if I'm wrong there someone? I'd love to find an easier way of doing it!)

Correction - it wasn't strictly staff/students & admins, it was done using a setting on the users profile page which they were free to change if they wanted/needed to, but was set to default to the basic toolset smile

I didn't make massive changes through the theme but I didn't find that anything I put in editor.css got overridden anywhere - it all just worked for me, but then maybe I wasn't doing anything complicated enough to trigger that kind of override! smile It made using the editor so much easier for staff as Tim suggested - what they saw in the editor was actually what they saw on the page instead of a best guess!

 

Richard

Average of ratings: -
In reply to Richard Oelmann

Re: Making the WYSIWYG editor really WYSIWYG

by David Scotson -
Glad to see there's more options in 2.4, I'm currently just changing things in this file & function below, which gives you some flexibility if you don't mind tweaking some settings in code.

/lib/editor/tinymce/lib.php -> function get_init_params()

I don't suppose you found a way to have a simple TinyMCE editor layout, and then give access to the more complicated buttons when you hit the full screen button? There used to be something like that in 1.9 and it would let me be a bit more extreme in cutting back the interface if all the options were still there, one click away?

regards,

dave

Average of ratings: -
In reply to David Scotson

Re: Making the WYSIWYG editor really WYSIWYG

by Mauno Korpelainen -

David,

in fact you can change almost anything you want in TinyMCE - those settings are just not implemented to core tinymce administration menu settings and not documented in Moodle Docs.

For example you can create totally new editor skins and use them instead of default skin "o2k7" set in lib/editor/tinymce/lib.php and lines

            'skin' => "o2k7",
            'skin_variant' => "silver",

If you look inside folder lib/editor/tinymce/tiny_mce/XXXXX/themes/advanced/skins/o2k7/ you see css files content.css, dialog.css, ui.css and ui-variant css files. You can clone skins, rename (for example to "bootstrap") and modify these skins (and add variant css) and then then just call

            'skin' => "bootstrap",
            'skin_variant' => "gold",

Editor.css is a good option if your site is using several themes. Then each theme can use different editor css. It may still not be totally WYSIWYG since moodle themes are using YUI reset/YUI base css while tinymce (luckily) is not using that nasty code that resets all html elemets - and tinymce is not using filters. In some cases parent theme (base/canvas) or activity css (styles.css) can also have custom css - like wiki or book modules. And adding all moodle css to tinymce makes no sense anyway - it would kill tinymce...

In most cases TinyMCE is actually outputting valid css while yui reset css is causing several bugs where output is not what users wanted/created in tinymce...

Administration of settings of tinymce could have many, many more useful settings included - for example those full screen settings can be set separately with 'fullscreen_settings' => " {...} ", in init code (lib/editor/tinymce/lib.php) but not in administration menu. But I won't continue this story any longer - in custom editor configurations you can modify what ever you want - and core editor changes slowly.  wink

Average of ratings: -
In reply to Mauno Korpelainen

Re: Making the WYSIWYG editor really WYSIWYG

by David Scotson -
I've actually started mucking around with re-skinning TinyMCE using the Bootstrap (Glyphicon) icons.

Once I located the CSS file it was fairly straightforward, though it's not a top priority at the moment. What was putting me off was the fact that apparently basically no-one else in the whole world seems to have ever produced a TinyMCE skin beyond the ones that come bundled with it. That seemed a bad sign, though as I say, I haven't seen any actual problems as yet.

Actually, I just re-did a search for tiny MCE skins and found a new one that looks quite good:

http://tinymce.swis.nl/

I'm going to try integrating that into my Moodle and see how it goes.
Average of ratings: -
In reply to David Scotson

Re: Making the WYSIWYG editor really WYSIWYG

by Mauno Korpelainen -

Well I did create some years ago a couple new skins - one with different background & color variants as a part of math themes (during my math plugin testing period) that were using theme based tinymce integration then (moodle 1.9) and one with bigger icons for a "kids editor theme".

I was also planning to create a separate mobile skin but never got the time to test it...

Note that tinymce is using a sprite & css positioning for most icons for most plugins.

TinyMCE web site has some documentation about skins, plugins and most settings - for example http://www.tinymce.com/wiki.php/Creating_a_skin

The Ribbon skin in http://tinymce.swis.nl/ looks nice and if you add different fullscreen settings you can get fullscreen mode to display totally different buttons, plugins or settings. Full screen settings overwrite always normal mode settings. It is also possible to use a custom "pdw" plugin pdw to switch the number of visible toolbar rows - or other swichers inside editor.

EDIT: I just checked my old files and in fact the first versions of stylist theme did have a separate "Tinykids editor" (like "Tinymath") and Tinykids editor was picking skin name from theme settings directly with

$skinlogo = get_user_preferences('theme_stylist_chosen_logo', '1');

and

'skin_variant' => $skinlogo,

in tinymce init code and this user_preference was set in theme switcher. I later changed the theme http://korpelainen.net/m2math/ (there is a tiny triangle switcher at the top of page) and never published the "tinykids" part but the old files are still in a safe place...

Average of ratings: -
In reply to Mauno Korpelainen

Re: Making the WYSIWYG editor really WYSIWYG

by Mark Pearson -

So, Mauno,
If I want to implement the Ribbon theme to see how it (mis)behaves I'm thinking I'd copy it into /lib/editor/tinymce/tiny_mce/3.5.1.1/themes to start with. Then looking at /lib/editor/tinymce/lib.php I see the statement

$params = array {
         'theme' => "advanced",

So I should replace that with 'theme' => "ribbon",  right? But further on there's a bunch of statements with 'theme_advanced_ which seem to override everything. Do I just comment these out? How did you get your 'kids editor theme' to function?

Thanks

Mark

Average of ratings: -
In reply to Mark Pearson

Re: Making the WYSIWYG editor really WYSIWYG

by Mauno Korpelainen -

I wrote some comments to https://moodle.org/mod/forum/discuss.php?d=217783 (usability forum)

You are right that if you select ribbon theme you can't use advanced theme statements. You can only use one editor theme at time: simple, advanced or custom theme like ribbon. Each editor theme can have custom skins and each skin can have custom skin variants (mainly color variants).

The init code of Ribbon in http://tinymce.swis.nl/documentation is not making all tricks (the Configuration of the toolbars-code with tabs) since coding style of editor integration in moodle 2 and this demo (or home page of tinymce) is different and you need to get tabs working too. So it's a task of combining core editor code and the demo code, checking (tinymce advanced) theme updates and so on.

My Tinykids and Tinymath editors were "modified clones" of whole editor TinyMCE that I placed to lib/editor and I should actually update them both to moodle 2.4 versions. Math plugin packages in Mathematics Tools forum had Tinymath included but I was testing Tinykids in summer 2011 and the files are in my local test PC (moodle version 2.0.3+)

I have right now lots of work at school but our Xmas holidays start on 21st of December so I could spend some time then to update those files + test some theme "things" (based on other template frameworks)

Xmas

Average of ratings: -
In reply to Mauno Korpelainen

Re: Making the WYSIWYG editor really WYSIWYG

by Mark Pearson -

Thanks Mauno,

I think that the tab feature of this theme is superb and it would be great to make that work. It sounds like there would have to be some plumbing work to enable 'ribbon' to take over from 'advanced' theme. It certainly doesn't look like 'plug in and go' smile But can we assume that all the functionality for displaying the tabbed interface is contained in the download?

 

Average of ratings: -
In reply to David Scotson

Re: Making the WYSIWYG editor really WYSIWYG

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

http://docs.moodle.org/dev/TinyMCE_plugins

I have just added you to MDL-34875

Average of ratings: -
In reply to Mary Evans

Re: Making the WYSIWYG editor really WYSIWYG

by David Scotson -
That tracking bug pretty much matches my wish-list for TinyMCE in Moodle and it looks like they're all fixed in 2.4, yay!

I think the only thing left on my wishlist is an editor that switches between a small, simple non-threatening setup and then gives you the full power and flexibility if you hit the full screen button.

Average of ratings: -
In reply to David Scotson

Re: Making the WYSIWYG editor really WYSIWYG

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Hi David,

I haven't looked at setting different things for the full screen mode, but I'm sure it would be fairly straightforward to do - I got most of my info direct from the tinymce site itself http://www.tinymce.com/ and I'm sure this information would be there somewhere.

Richard

Average of ratings: -