new wysiwyg editor for moodle

Re: new wysiwyg editor for moodle

by Jason Fowler -
Number of replies: 8

I don't see how swapping to TinyMCE 4 will be easy. We have a lot of custom code that will need reworking to make it fit - the language support between Moodle and TinyMCE is one of those areas. It's not something that will be undertaken lightly.

Additionally, we opted for Atto, as it is something developed and maintained in house. Moodle is now in control of its own editor. We can add features without worrying about breaking upstream compatibility. This is a HUGE benefit for Moodle in general, and the Moodle developers specifically.

Average of ratings: -
In reply to Jason Fowler

Re: new wysiwyg editor for moodle

by Mauno Korpelainen -

Remember old HTMLArea - the default editor of moodle 1.X ? When support for HTMLArea was discontinued core developers started to fix editor bugs themselves - first it was easy when moodle supported only IE4-6 and FF2, after 5 years tracker was full of unassigned HTMLArea bugs that nobody wanted to fix - we got Safari, Chrome, Opera, FF3, IE8, IE9,..., mobiles, tablets,...

HTMLArea was a perfect example of code that was written non-modular, non-pluggable, non-changable - and it took 5 years until Petr Skoda finally wrote the new pluggable editor code for moodle 2 that should allow adding any editors (editor plugins) to moodle: the code for CKEditor integration is not similar to TinyMCE 4 integration or TinyMCE 3 integration and TinyMCE 3 does not need to override TinyMCE 3 - right?

We tested optional editors already with moodle 1.6...1.9 period and no matter what method is used it's good to be able to change editors, editor themes, editor skins and editor skin colour variants including icons of editor as a part of each editor skin. Themes can't detect editor skin (or can they?) but themes can be used to set editor skin with some skin switcher or setting (or user preference) - I was using this method with math plugins (and "tinymath editor") in moodle 2.3 until moodle 2.4 moved custom plugins to new folder...

Adding hundreds of css tags to theme css to override some default editor css settings is like overriding yui css with base theme css and custom theme css.

It would be so much easier to just select themes, select editors, select editor skins and other editor settings from administration menu or even user preferences. The only problem here seems to be custom plugins that don't use similar html/css as core plugins. When you have selected a skin called "moodle" core plugins create html like

<span class="mceIcon mce_numlist"></span>

and skin moodle ui css has code like

.moodleSkin span.mce_numlist {background:url(img/numbered_list.png) 2px 2px no-repeat;}

Customized Moodle plugins on the other hand create html like

<span class="mceIcon mce_moodleemoticon">
<img class="mceIcon" alt="Insert emoticon" src="http://xxx/lib/editor/tinymce/plugins/loader.php/moodleemoticon/2013050100/img/moodleemoticon.png"></img>
</span>

and load a png image from custom plugin tinymce/img folder

Now this can be changed if a user knows what files to replace, images to hide or css to override - and it is just the typical way to change things in moodle.

If nobody else wants to test integration of TinyMCE 4 to moodle 2.5 or 2.6 I could try it next week - as an optional editor plugin - with selectable TinyMCE 4 skins that can be tested with http://skin.tinymce.com/

Average of ratings: Useful (1)
In reply to Mauno Korpelainen

Re: new wysiwyg editor for moodle

by Jason Fowler -

Mauno, I've already said else where:

To replace the images in the TinyMCE editor is simple - the default icons are loaded as backgrounds -- I've just finished my third deployment in the trenches of TinyMCE, so I have a fresh view on this -- you can set the background of any toolbar button with:

.moodleSkin span.mce_bold {background:url(img/bold.png) center center no-repeat; }
Where the image path is relative to your theme's css file. For TinyMCE plugins, you first need to hide the IMG in the plugin, then set a background for the contain anchor tag.

Surely themers are familiar enough with CSS to handle this in their own themes.

 

 

Creating a contrib plugin for TinyMCE4 would be a great step towards getting it ready for possible integration in core. I can't say for sure if it will ever happen - Atto is looking pretty decent, and does most of what we need it to now, so I can't really see us bringing in a 3rd party editor into core to replace our own, custom built, community controlled editor, but crazier things have happened...

Average of ratings: -
In reply to Jason Fowler

Re: new wysiwyg editor for moodle

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

Yes themers can handle this in their own themes - although the complication of dealing with TinyMCE plugins may throw people. but I presume your code example should really read 

.moodleSkin span.mce_bold {background:url([[pix:theme|img/bold.png]]) center center no-repeat; }

when in the css of a moodle theme? 

But if we're going to go down the monochrome route anyway - why not make use of an icon font - such as font-awesome as is being used successfully in many of the newer themes? Much easier for themers to change as required I would have thought.

As for the possibility of TinyMCE4 not making it into core because we have Atto - have you read back over these threads? There is a wide agreement that while there may well be a need for a slimmed down lightweight editor, there is also a great demand for a full featured tool - are you saying that Moodle is going to go down the road of a slimmed down one accompanied by an outdated version of TinyMCE into the future with no thought of updating it? Because that is what your comment seems to be implying.

As good as you say Atto is looking, personally I strongly believe the teams efforts would have been better spent in getting TinyMCE4 into core and not developing a separate inhouse editor from scratch - my 2c!

Please do NOT leave us with an editor which is only suitable for forum posts and the like and makes content creation a web-developer field by requiring a knowledge of markup to generate anything more than the most basic content.

This discussion has been had on these forums and resulted in the community consensus that there is a need for both (unless you are going to ignore that consensus Jason and just plough ahead solely with Atto?) - and surely if that need is there, moodle should have the best of both - which will mean getting TinyMCE4 sorted out for Moodle core.

As for it being crazy to replace 'our own, custom built, community (by which you actually mean HQ as most of the comments from the community relate to getting TinyMCE4 into core not a brand new editor) controlled editor' - well I'd refer you to Mauno's post about the old HTMLArea!! Beside's no-one is suggesting replacing - the comments are all that the choice is needed!

Average of ratings: Useful (1)
In reply to Richard Oelmann

Re: new wysiwyg editor for moodle

by Jason Fowler -

well, yes, the code I grabbed was out of the TinyMCE css, which doesn't support pix at all.

I'm not against font based graphics - I would love to see them used everywhere, they are powerfully customizable. At HQ we work a different way to the rest of the community, and getting these things done - swapping TinyMCE3 for TinyMCE4, getting all the SVG and PNG icons swapped for fonts, etc - takes longer than our allocated 3 week sprints, so these decisions need to be made in advance by Martin, so we can start work on them.

I'm not making the decisions here. I was the HQ dev that tried to get TinyMCE4 in to 2.6 (https://tracker.moodle.org/browse/MDL-40421) - I met with opposition from all sides when I did (mostly discussed in SCRUM and planning meetings, and not on the tracker). My compromise was to make TinyMCE3 look like TinyMCE4, with the hopes of reducing the shock that could be caused by a swap in the future. I would like to see TinyMCE4 as the replacement for TinyMCE3, but I would also like to see Atto developed to the point we don't need another editor at all.

As for community consensus, that's the beauty of the moodle community. Just because it isn't in core, doesn't mean you can't have it. You could develop TinyMCE4 as a CONTRIB plugin, then when it is mature enough, get it integrated in to core - this is how Atto started out, and we've rushed Atto in to cover off some problems with iOS devices. We can't do the same for TinyMCE, because of the way it handle languages - it's been mentioned before, the road to integrating TinyMCE4 is a long one, and would probably take longer than a single release cycle, so we will need to start the process by developing a contrib plugin, then integrating it in to the core.

Now, I personally won't be doing that. I only get 1 week in 7 to work on personal moodle projects, which TinyMCE4 would fall in to, and the other 6 weeks are spent working on issues Martin deems important to the future of Moodle. If I were to start the CONTRIB plugin for TinyMCE4 I would be doing it in my own time, and I really try to avoid taking my work home with me.

So I'm not saying TinyMCE4 will never happen, I'm just saying HQ have been told there is a process that will be followed if it is to make it in, and that process is to prove it works as a CONTRIB plugin, then integrate it in to core. 

Average of ratings: -
In reply to Jason Fowler

Re: new wysiwyg editor for moodle

by Mauno Korpelainen -

It looks like I could have a functional TinyMCE 4 plugin available next week. I have been testing the files with two methods - normal editor plugin tiny4 with editor css and fonts in theme (Essential) in 2.5.2 and normal 2.6 editor plugin tiny4 with styles.css and fonts folder in tiny4 plugin folder (the 2.6 method Mary and Gareth introduced in other post http://docs.moodle.org/dev/Themes_overview#Adding_custom_fonts ).

There was one strange BIG issue at start - I hope someone could explain this - moodle did not load original /lib/javascript.php/1381343550/lib/editor/tiny4/tiny_mce/4.0.7/skins/lightgray/skin.min.css because MIME-type of that file is text/html and not text/css - but the original skin css file IS normal css file!!! So this must have something to do with cache methods of moodle?

That's why I used the 2 workarounds for starters.

Adding language support etc really is a large task but since we already have tinymce 3 as a model it should not be impossible to clone to Tiny4 - I have not yet had time to test it but as I said before I have more time next week to try all the settings.

Average of ratings: Useful (4)
In reply to Mauno Korpelainen

Re: new wysiwyg editor for moodle

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

That's great Mauno - my coding skills may not be up to creating such a plugin but Id be more than happy to help test or anything else you need!

Average of ratings: -
In reply to Jason Fowler

Re: new wysiwyg editor for moodle

by Kris Stokking -

I am very interested to learn about the features that would cause a break in upstream compatibility with TinyMCE.  Creating a new editor doesn't actually solve those problems unless you also intend to make it the default... is that the case?

Average of ratings: -