Issue Details (XML | Word | Printable)

Key: MDL-11113
Type: Improvement Improvement
Status: Open Open
Priority: Major Major
Assignee: Petr Skoda
Reporter: N Hansen
Votes: 36
Watchers: 21
Operations

Add/Edit UI Mockup to this issue
If you were logged in you would be able to see more operations.
Moodle

Get a fully working HTML editor in Moodle

Created: 04/Sep/07 07:06 AM   Updated: 16/Jun/09 05:01 PM
Return to search
Component/s: HTML Editor
Affects Version/s: 1.9, 2.0
Fix Version/s: 2.0

File Attachments: 1. Microsoft Excel mdl_tiny_buttons.xls (30 kB)

Image Attachments:

1. Compare.jpg
(47 kB)

2. editorprofile.jpg
(29 kB)

3. kitchenSink-button.jpg
(24 kB)

4. selection.jpg
(28 kB)

5. tinygenerator.jpg
(165 kB)
Issue Links:
Dependency
 

Participants: Dan Poltawski, Jason Meinzer, Martin Dougiamas, Mathieu Petit-Clair, Matt Gibson, Mauno Korpelainen, N Hansen, Petr Skoda, Ratana Lim, Ryan Smith, Sam Marshall and Samuli Karevaara
Security Level: None
Affected Branches: MOODLE_19_STABLE, MOODLE_20_STABLE
Fixed Branches: MOODLE_20_STABLE

Sub-Tasks  All   Open   
 Sub-Task Progress: 

 Description  « Hide
The current HTMLArea editor is dying off and many people are having more and more problems getting it to work properly without any real solutions:
http://moodle.org/mod/forum/discuss.php?d=59614
http://moodle.org/mod/forum/discuss.php?d=78134
http://moodle.org/mod/forum/discuss.php?d=76401

The lack of a working editor is a make or break problem for many of us and getting a working editor should be a top priority.

http://moodle.org/mod/forum/discuss.php?d=76912

There have been calls for inclusion of TinyMCE:

http://moodle.org/mod/forum/discuss.php?d=41831

And FCK editor:

http://moodle.org/mod/forum/discuss.php?d=78305

 All   Comments   Change History   Version Control      Sort Order: Ascending order - Click to sort in descending order
Ryan Smith added a comment - 25/Mar/08 09:27 PM
I definitely agree! Working with htmlArea is very frustrating at times. Both TinyMCE and FCK are excellent, well-maintained, and output XHTML 1.0 (and work with Safari).

I would love to see an official alternate editor added as an optional choice with 1.9 ASAP. If that isn't possible, definitely get it added in 2.0.


Dan Poltawski added a comment - 25/Mar/08 09:35 PM
Just a note to mention the YUI editor could also be an alternative? It seems to be improving all the time and we have it included too

Mauno Korpelainen added a comment - 26/Mar/08 01:03 AM
Possible yes - although YUI RTE is still beta and has only a small amount of those properties that TinyMCE and FCKEditor have. Why not have all of them? This is the best possible time to create first that selection code for any current or coming editor including htmlarea - if we can select languages, themes and activities it would be natural to be able to select editor integration files too.

Mauno Korpelainen added a comment - 26/Mar/08 01:34 AM
Dan,

have you tried to integrate YUI RTE to moodle? The code itself is great but not as user friendly as simple init code of TinyMCE or FCKEditor with good documentation. If I had to choose my order of editors would be TinyMCE, FCKEditor, HtmlArea and YUIRTE...


Mathieu Petit-Clair added a comment - 26/Mar/08 03:46 PM
Hey, nice to get some comments in here!

I had a short talk with Martin at lunch and he was telling me there was apparently a consensus on using Tinymce. FCKeditor is quite nice, and I wouldn't mind one or the other. All others have shortcomings at this time (arguably less and less as time goes on).

I am starting working on this. We want to have a recent html editor in the next version of Moodle. It might be backported to 1.9, but this is not the goal at this time. I have the feeling (and the more I look at the code, the stronger it gets) that updating the editor will involve modifying quite a lot of code, so it might be quite a lot of work to backport it. We'll see...

Ideally, we would come up with a set of functions that people could use to create modules to use whatever editor they fancy. This would be quite nice, but we need to "plug" the editor to (among others) the list of files (images and others) available on the server (this part of moodle core will get a serious overhaul soon), the moodle list of smileys, etc.

Please, if you already have code/patches/etc. send them in or post links to them in this issue. Even if it's for older versions, or not quite working, I will have a look and it might help a lot.


Mauno Korpelainen added a comment - 26/Mar/08 09:50 PM
Great!

I have no patches because I used different route to render editors but you should check at least these files and functions and all activities separately (some have special editor code but not all):

lib/weblib.php: functions

use_html_editor
print_textarea
print_editor_config
editorhelpbutton
helpbutton
emoticonhelpbutton
editorshortcutshelpbutton

lib/moodlelib.php: functions

can_use_html_editor (browser check to support latest versions of Safari and Opera)
loadeditor (no need to change? -> editorlib.php)

lib/adminlib.php: classes and functions for settings

lib/editorlib.php (selection and classes)

Those plugins Glen wrote (moodleimage and moodlelink) for TinyMCE are good - you could check capabilities to use of coursefiles and imagemanager. When you get the basic integration ready I would be happy to help with testing plugins, themes and skins and settings.

Mat,
remember to upgrade moodle to the latest code of TinyMCE 3 from http://tinymce.moxiecode.com/


Mauno Korpelainen added a comment - 26/Mar/08 10:48 PM
And compressor code should be optional (some kind of a selector use compressor/disable compressor) - http://wiki.moxiecode.com/index.php/TinyMCE:Compressor/PHP

If it helps we could also create a theme/skin that looks like htmlArea for such moodlers who still miss htmlArea. One part of TinyMCE that I have never tested is Spellchecker http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/spellchecker

It is a long list of new code and we need definitely many testers in different environments but the good thing is that after integration is ready bug fixes in TinyMCE itself (if you find any) will be done by Moxiecode and other developers of TinyMCE. Just contact Spocke (Main developer of TinyMCE) directly or TinyMCE support http://tinymce.moxiecode.com/support/


Mauno Korpelainen added a comment - 27/Mar/08 02:39 PM
Mathieu, two notes:

1) Although we may probably use TinyMCE something unexpected has happened.

Latest nightly build XINHA has started to work with the latest Opera and I checked that it supports with Safari too - Thanks you Petr DlouhĂ˝ ( MDL-6403 )

This is really good news because Xinha has some really good plugins and the integration of Xinha is almost similar to integration of htmlArea - basicly you just replace name htmlarea with Xinha.

2) If you use Janne's integration for TinyMCE you should probably check also files

lib/editor/tinymce/moodlecontent.css
lib/editor/tinymce/moodledialog.js
lib/editor/tinymce/tinymce.class.php


Mathieu Petit-Clair added a comment - 27/Mar/08 03:33 PM
Hey, that's good news! Is it possible to make xinha xhtml-compliant? It seems to be possible to make this happen with tinymce, following http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/valid_elements#Full_XHTML_rule_set: (at some performance cost, apparently)

Can you try dropping-in Xinha to see if it "just works" ? This could be a very nice thing for 1.8 / 1.9 .. I'm sure a lot of people would appreciate.. We can then see if TinyMCE/FCKeditor are worth the trouble of adapting all the code for 2.0.


Mauno Korpelainen added a comment - 27/Mar/08 04:47 PM
I added the testing code to http://moodle.org/mod/forum/discuss.php?d=93475

I think it works with all versions of moodle and should be easy to change the administration code to use Xinha - also all those hacks that have been made to old htmlarea code should work. I haven't tested performance etc


Mauno Korpelainen added a comment - 27/Mar/08 05:24 PM
TinyMCE may still be the most reliable and flexible choice and configuration options are absolutely the best of these 3 editors. I agree that changing editor integration code is not easy - the original code was written to be stable and we would need some kind of module structure for editors to be able to change them easier. We don't yet know what happens when we get new browsers ( Firefox 3, Internet Explorer 8,...).

If we want the easiest solution it might be to replace htmlarea with Xinha and to write new code for "Editor editor" to be able to change editors later with some standard way.

And code of coursefiles.php should work with Xinha too but the files used for browsing images should be moved to foder xinha. One interesting extra plugin is Equation editor - xinha has AsciiMathML Formula Editor and Glen has added DragMath plugin to his TinyMCE test site plugins.


Mauno Korpelainen added a comment - 27/Mar/08 05:47 PM
The list of possible configuration options of Xinha is in http://xinha.webfactional.com/wiki/Documentation/ConfigVariablesList

If we look at other systems using TinyMCE

http://wiki.moxiecode.com/index.php/TinyMCE:CMS_systems

or FCKEditor

http://www.fckeditor.net/whosusing

and Xinha or YUI RTE have no references... TinyMCE and FCKEditor dominate...


Mathieu Petit-Clair added a comment - 27/Mar/08 05:59 PM
Yeah, this makes me think it could be possible to provide different settings per role .. thus letting some people input tables or some more advanced formatting (mathml) while providing a more simple interface to student or users not needing the advanced stuff. This would be a bit of a nightmarish admin interface to code though. I've seen it in a few CMS and I haven't seen one that's really nice...

Mauno Korpelainen added a comment - 27/Mar/08 07:13 PM
Maybe the settings of editor could be collected from several places: for example names of possible plugins could be in table mdl_tinymce_plugins and they could be selected based on role, activity, user...id
Table mdl_tinymce_config could have the basic init code like
entity_encoding : "raw"
or
theme_advanced_fonts : "Arial=arial,helvetica,sans-serif;Courier New=courier new,courier,monospace"
and they could be selected based on role, activity, user...id
and so on (languages, themes...).
If no settings were found from database editor would always use default configuration.

Or we could have the whole init code in one editable file/field of database and the name of that file/field could be called from editor integration code. The same way as we use session themes, user themes ,course themes or category themes. The original integration code is simply too complicated.


Mauno Korpelainen added a comment - 27/Mar/08 07:38 PM
The only restricting functions are function print_textarea and use_html_editor in weblib.php

If they were in theme meta.php or in some selectable editor integration file and location of init code could be changed based on role, activity or user (from editor profile files like tiny_professional.php and tiny_kids.php) the situation would be close to editing themes. There is a plan to create a simple theme with configuration menu - the same way we could have a simple editor profile selector that could save the init code to database or to edited editor profile file.


Mauno Korpelainen added a comment - 27/Mar/08 08:00 PM
In fact http://xinha.gogo.co.nz/xinha-nightly/examples/ExtendedDemo.html

is an example of such selector. You can select language, skin and each plugin separately. The only thing missing is the possibility to select buttons and the order of buttons. If the order of buttons comes from table where we have row (1,2,3,4) and order number 1,2,3... it could be possible too. Editor administration code could be in the same folder as editor itself, not necessarely in adminlib.php

Anyway I am just giving ideas - some of them may be easy to implement and some may be too troublesome.


Mauno Korpelainen added a comment - 27/Mar/08 08:09 PM

Mauno Korpelainen added a comment - 27/Mar/08 08:18 PM
By the way that Extended demo of Xinha is included to Xinha-nightly package examples folder with all files.

Mauno Korpelainen added a comment - 27/Mar/08 09:08 PM
I have been testing these editors no several hours and one thing that is very different is use of mouse right click. I personally like the capability to righ click things like images to edit properties, add links etc and this works ok in TinyMCE and FCKEditor but Xinha has no right click properties. On the whole TinyMCE feels better - but this is only my opinion. All of these 3 editors will bring lots of new features to moodle - and hopefully fix some old bugs (but cause no new ones).

Mauno Korpelainen added a comment - 28/Mar/08 05:38 PM
Mathieu,

One good way to go - if we want to allow use of different editors with different editor profiles - is to take away functions print_textarea and use_html_editor to some selectable file. To make sure that this file is found in all cases we could for example have editable code in theme folders in a new file, let's say editor.php (or in database) and if there is no such file in theme folder (or no such data in database) moodle should read default editor file from some folder, moodle main folder for example (or read default code from database). Some settings could be in theme/database (just a list of init settings or some php tags to include some editor profile and theme designers could design new editor skins and editor themes ) and the file for creating editor profiles could be in folder lib/editor/nameofeditor with basic administration code for buttons, plugins, languages and security/site wide settings (or settings could be in database). Meaning that each editor has own administration code (the settings are now in adminlib.php and Janne's integration files) and we could change/select the editor itself and editor profile in themes or based on roles (the capability check can be in theme files like Glen did in his TinyMCE integration)

One important thing to note is that editors do not necessarely need additional init code (they use defaults if no settings are found) but some settings like selection of absolute/relative paths and different filters may cause lots of trouble if they are not correct so some kind of a default editor profile (like we have default settings for different roles) could be nice.


Mauno Korpelainen added a comment - 29/Mar/08 05:22 PM
To make selection of editor simple we could add to table mdl_user and field htmleditor values for editor profile. Current value 0 means that user does not want to use editor and 1 means selection of editor in user profile. Now if 1 means at the same time default editor in a new table mdl_editor_profile we could have as many editors/editor profiles as we like and selection of editor could be controlled with one value 1, 2,... in field htmleditor of table mdl_user. The admin settings could be controlled with one admin file and only the location of that file could be in profile. The admin file itself could be different for all editors and for htmlarea all settings are already available in lib files.

Mauno Korpelainen added a comment - 29/Mar/08 05:30 PM
This would make changing both default editor and role based editor easier - see the attached table editorprofile.jpg - and some administration files could be simple init code and some (at least default editor administration file) could have control panel where user (administrator) can hide/show buttons, plugins etc.

Mauno Korpelainen added a comment - 29/Mar/08 06:02 PM
Mathieu,

I will create a test site during the next days (moodle 1.9) so that when you edit profile and html editor is enabled in site administration you have the following choices (from field htmleditor in table mdl_user):

When editing text

0 Use standard web forms
1 Htmlarea - current "Use HTML Editor (some browsers only)"
2 TinyMCE
3 Xinha
4 FCKEditor

I'll send you a link to test when this is ready - I think it will take 2-3 days to get all the settings checked. If I mix Xinha and HtmlArea custom plugins and smilies are not rendred in Xinha so it is better to rewrite code to Xinha. Most button controls (hide/show) of htmlarea work in Xinha with current code of htmlarea but still Xinha is not htmlArea (it's more like a son or daughter of htmlarea)


Mauno Korpelainen added a comment - 30/Mar/08 08:17 PM
Editor selection is working.

Mauno Korpelainen added a comment - 30/Mar/08 08:17 PM
After some hours of playing with code I found a solution that enables using several editors and custom editors.

Change to user/editlib.php:

if ($CFG->htmleditor) { $choices = array(); $choices['0'] = get_string('texteditor'); $choices['1'] = get_string('htmleditor'); $choices['2'] = get_string('tinymce'); $choices['3'] = get_string('xinha'); $choices['4'] = get_string('fckeditor'); $mform->addElement('select', 'htmleditor', get_string('textediting'), $choices); $mform->setDefault('htmleditor', 1); $mform->setAdvanced('htmleditor'); }

Changes to lib/weblib.php:

moved functions print_textarea, use_html_editor and print_editor_config from lib/weblib.php to folders

lib/editor/0/meta.php
lib/editor/1/meta.php
lib/editor/2/meta.php
lib/editor/3/meta.php
lib/editor/4/meta.php

These files have all the functions that are browser spesific - I am now checking the administration code.

I changed code in lib/weblib.php

if (!isset($THEME->standardmetainclude) || $THEME->standardmetainclude) { ob_start(); include_once($CFG->dirroot.'/theme/standard/meta.php'); $metapage .= ob_get_contents(); ob_end_clean(); }

to

if (!isset($THEME->standardmetainclude) || $THEME->standardmetainclude) { ob_start(); $eprof = intval($USER->htmleditor); include_once($CFG->dirroot.'/lib/editor/'.$eprof.'/meta.php'); include_once($CFG->dirroot.'/theme/standard/meta.php'); $metapage .= ob_get_contents(); ob_end_clean(); }

and this way correct editor code is selected (unless editor is disabled site wide) and if standardmetainclude is false in theme it is also possible to add modified functions to certain theme.

Changed in lang/en_utf8/moodle.php string

$string['htmleditor'] = 'Use HTML editor (some browsers only)';

to

$string['htmleditor'] = 'HtmlArea (some browsers only)';

and added new lines:

$string['tinymce'] = 'TinyMCE';
$string['xinha'] = 'Xinha';
$string['fckeditor'] = 'FCKEditor';


Mauno Korpelainen added a comment - 30/Mar/08 08:21 PM
In previous comment: those meta.php in folders 0...4 have files have all the functions that are EDITOR spesific
(where is the EDIT button of this tracker ???)

Mauno Korpelainen added a comment - 01/Apr/08 08:19 PM
Hi Mathieu and other testers of editors,

after reading all pages of http://wiki.moxiecode.com/index.php/TinyMCE:Index and several days of comparing TinyMCE, FCKEditor and Xinha I must say that - although it is good to be able to select different editors - there is only one editor where EVERYTHING WORKS, it's fast and is flexibly configurable. That editor is TinyMCE and my opinion is that it is the only reasonable alternative to next default editor of moodle. Iwas disappointed to stability of Xinha - it is not much better than Htmlarea - and although FCKEditor is near the properties of TinyMCE it is possible to add it later to moodle.

I think we should use all our energy to get the administration of settings of TinyMCE ready and replace Htmlarea with TinyMCE as a default editor of moodle. latest version of TinyMCE 3 is excellent and those plugins Glen has modified (moodleimage, moodlelinks and dragmath) work really nice.

All we need is an administration menu for changing different settings. Role based or not - it is good to have one solid configuration made by administrator - but if it possible to have custom user settings it is even better.


Mathieu Petit-Clair added a comment - 02/Apr/08 11:56 AM
Thanks for doing this job, Mauno .. Eloy was telling me yesterday that it would be nice for somebody to do just that.

Mauno Korpelainen added a comment - 03/Apr/08 04:21 PM
I think Eloy, you and other main developers are experts in creating administration forms for moodle but I could also try to create an alternative version of administration code - starting from the current button selection - and test some kind of a editor profile generator. The main idea is to save all settings as a string to database - php can explode and implode those strings to arrays and back. That way users could get a possibility to select some settings of editor themselves (not only the editor) and administrators would have a full control to site wide editor settings. The field for those user settings could be in table mdl_user and field htmleditor - now it is used for testing if user wants to use htmleditor and in my integration it gives the number of editor (0 no editor, 1 htmlarea, 2 tinymce...) but I could simply change in previous code $eprof = intval($USER->htmleditor); to read only first number as the editor and different custom settings could be added with separator after this number.

I just figured out why messages were not working on my test site with multiple editors enabled - if some activity does not use normal theme headers it does not get meta tags from theme or in my integration editor meta.php. After including a tiny file meta1.php to message/discussion.php and send.php I noticed that it is possible to get editor itself configurable and to get as many different editors as we want and also to get different configuration for message editor (or some other activity if needed)

It would also be possible in tinyMCE to give different configuration for different activities using name of class of textarea (or other element) as editor-selector just by giving multiple init code

tinyMCE.init({
mode : "textareas",
theme : "simple",
editor_selector : "mceSimple"
});

tinyMCE.init({
mode : "textareas",
theme : "advanced",
editor_selector : "mceAdvanced"
});

but it would work only in tinyMCE.


Jason Meinzer added a comment - 04/Apr/08 06:08 AM
Great job Mauno, your post came at just the right time and is very helpful! Your approach works great in our 1.9 installation except I opted to use the editor names instead of 0, 1, 2, 3, 4 (so we can use lib/editor/fckeditor/meta.php instead of lib/editor/4/; requires the htmleditor column type to be changed from int to varchar)

Mauno Korpelainen added a comment - 04/Apr/08 07:39 AM
It was just my choice to use folders 0,1,2,3... any other solution is as good or even better. I have continued testing this editor selection using different editor functions in separate files for different editors and it has been pretty successful. Some names for buttons and plugins are different in htmlarea and tinymace (and other editors) so if we use just one administration code for site wide button control those names of buttons that need to be hidden must be changed by some function. Also the separation of names is made using space " " in but tinymce uses "," as a separator. For example the "button hiding code of editor for messages in my current tinymce test integration (meta1.php) looks like this

plugins : "safari,emotions,searchreplace,fullscreen,advlink,advimage,moodleimage,moodlelink",
theme_advanced_buttons1 : "fontselect,fontsizeselect,",
theme_advanced_buttons2 : "forecolor,backcolor,separator,moodlelink,unlink,moodleimage,emotions,charmap,search,separator,code,separator,fullscreen",
theme_advanced_buttons3 : "",
theme_advanced_disable : "formatselect,sub,sup,copy,cut,paste,cleanup,undo,redo,justifyleft,justifycenter,justifyright,justifyfull,ltr,rtl,bullist,numlist,outdent,indent,hr,anchor,tablecontrols",

when htmlarea does the same with function

use_html_editor('message', 'formatblock subscript superscript copy cut paste clean undo redo justifyleft justifycenter justifyright justifyfull lefttoright righttoleft insertorderedlist insertunorderedlist outdent indent inserthorizontalrule createanchor nolink inserttable'); in file message/discussion.php

but it's only needed because I have not defined default administration and configuration of buttons and plugins for tinymce. All these editors have a different way to replace textareas with editor but it really does not matter if the replacement is done by function print_textarea or use_html_editor as long as it is possible to control those settings. And FCKEditor has of course different settings...


Mauno Korpelainen added a comment - 04/Apr/08 07:49 AM
...and in fact that

theme_advanced_disable : "formatselect,sub,sup,copy,cut,paste,cleanup,undo,redo,justifyleft,justifycenter,justifyright,justifyfull,ltr,rtl,bullist,numlist,outdent,indent,hr,anchor,tablecontrols",

is not needed at all because

theme_advanced_buttons1 : "fontselect,fontsizeselect,",
theme_advanced_buttons2 : "forecolor,backcolor,separator,moodlelink,unlink,moodleimage,emotions,charmap,search,separator,code,separator,fullscreen",
theme_advanced_buttons3 : "",

shows just the selected buttons (noticed 5 seconds after sending previous comment)

So it is possible to select either the list of buttons you want to show or a list of buttons you want to hide (disable)


Mauno Korpelainen added a comment - 04/Apr/08 05:30 PM
In fact - WHY should the administration settings be similar for all editors? Editors have for example some different plugins and different settings... Maybe the administration of editors could be based on a similar structure as themes. I try to test during this weekend an editor selector/editor for administrators where all editor profiles (folders) are inside folder htmleditor like in site theme selector and administrator should see a demo page of each editor in preview window and should be able to change some editor profile settings for each editor.

Normal users should have the capability to select editor from those editor profiles they are allowed to use - there may be several editor profiles for the same editor - and maybe some basic settings like skin.


Sam Marshall added a comment - 04/Apr/08 05:54 PM
Just a note: I'm fully in favour of changing the (default) editor, and (without much knowledge in the area) would favour tinymce.

However one key aspect for my employer (and I'm sure many other users) is accessibility. This is not just the output (which should be valid xhtml) but in actually using the editor. Have these alternatives been accessibility-tested (e.g. is it 100% keyboard accessible, is it usable in JAWS, etc)? It may be possible to get an expert accessibility tester here to evaluate an editor such as tinymce, should we request that? (May not be able to happen instantly.)

One other issue re editors is that a frequently-expressed requirement here is the ability to configure the editor differently in different tools. I.e. there should be a 'simple' editor for use in forum posts or blog comments where you basically just want to be able to type text (so you only need bold, italic, bullet points, links, maybe insert image) and a 'complex' editor for use in creating html resources or wiki pages (where you need tables, heading styles, other structure stuff). So ideally the editor settings would actually offer at least two different configurable profiles for which buttons can be turned on/off by admin, and then when used in code, the code that calls the editor (e.g. a wiki page) would specify which profile. Obviously this is a bigger scope than changing the editor and should probably be kept separate but if you get into talking about changing the admin settings then it would be relevant.

.


Mauno Korpelainen added a comment - 04/Apr/08 08:45 PM
I am not sure if somebody has compared accessibility of different editors - at least developers of TinyMCE have tried to support accessibility. For example http://wiki.moxiecode.com/index.php/TinyMCE:Accessibility
http://culturall.atrc.utoronto.ca/index.php?option=com_content&task=view&id=90&Itemid=35
http://tinymce.moxiecode.com/punbb/viewtopic.php?id=10996 where Spocke tells: "We have also improved the accessibility you can now navigate the whole UI using the keyboard.
Another bigger change is that the default valid_elements now include all XHTML strict element and a few transitional this to reduce the most common query about Why does TinyMCE remove my XYZ tag."

I am here making my personal testing (trying to help Mathieu and other mates) to get editors to behave like themes or part of themes and the best point in modern editors is that both theme and skin of editor can be changed and particularly in TinyMCE almost all parts of editors are configurable. Some other moodlers might prefer removing htmlarea and making tinymce as the one and only editor with one stable configuration. I like the idea that all activities, all themes, all sites and in distant (or not so distant?) future also all users may have an individual configurations for editors and that's the reason why I am "pushing" this idea of taking functions like print_textarea, use_htmleditor and probably also administration functions to separate configurable files or to database.


Mauno Korpelainen added a comment - 04/Apr/08 10:08 PM
There are two levels of accessibility features FCKEditor aims to provide with version 3 (not yet in Current Release 2.6 RC)

Making the editor usable by people with disabilities.
Ensuring that accessibility features can be introduced in the contents produced with the editor, guaranteeing and enforcing the minimum accessibility level in the contents.

http://docs.fckeditor.net/FCKeditor_3.x/Design_and_Architecture/Accessibility

I think the goal for both TinyMCE and FCKEditor developer teams is similar - they both want to build the best possible open source editor...


Mauno Korpelainen added a comment - 06/Apr/08 07:27 PM
Mathieu,

I have now ready a functional "TinyMCE init code generator" (modified Petr's book module) that allows testing and creating online any init code and because book module has already all necessary capability checks I can modify this to generate FCKEditor code as well - need just to create new configuration file for FCK Editor.

When I have renamed files and functions of this "test module" so that it does not cause any trouble to book module itself I could send you a copy if you need one.


Mauno Korpelainen added a comment - 07/Apr/08 01:59 PM
I am going to test next some more selection ideas:

If administration of editors (first only TinyMCE and FCKEditor) is in (admin only) module(s) new editors are easy to install or uninstall. You only need to upload/upgrade the latest files of custom editor itself (or several versions of custom editor for testing purposes) and the administration module. Editor itself could be selected from a list of (visible) profiles in database (value of field htmleditor in table mdl_user or mdl_config - value 0 can still be "no editor" and value 1 can be "default editor" with default settings) and there is no limit for a number of profiles (like folders 0,1,2,3...). Selection of buttons, plugins and most basic properties of editor can be done with selection boxes (show/hide) or drop down lists. If init settings are taken from database (editor profile xx in table yy) no init files are needed.


Samuli Karevaara added a comment - 08/Apr/08 04:40 PM
While FCKEditor is very quite nice, I vote for TinyMCE because that's what Wordpress uses. Sticking with just one editor is better in my opinion than trying to support different choices. If an API and hooks to allow this are possible, then fine and a third-party can then step up to support the other option. But having only one "official" editor would mean less bugs, more testers et cetera for that editor.

Mauno Korpelainen added a comment - 08/Apr/08 05:11 PM
Yes, it's good to have one default editor and TinyMCE is at the moment the best choice but I prefer a system where default editor can be changed without changing several lib files - the same way we can install/uninstall languages, themes, activities...

Most cms systems use modular structure for integration which could be better than stable settings in moodlelib.php, adminlib.php, weblib.php, editorlib.php (only my opinion - stable default editor is ok as well) ... you never know when you need to change editor again - for example YUI RTE can be a pleasant surprise after one year... All the functions used to render editor could be outside main lib files

Moodle usually needs only two functions to call editor: print_textarea and use_html_editor and to make everything simpler we could even take away use_html_editor and use only function print_textarea with different settings to render editor (using a function that does the replacement when window is loaded in function print_textarea - now htmlarea first prints a textarea and replaces it with editor using other function)

I vote for TinyMCE as well if only one editor is available.


Jason Meinzer added a comment - 09/Apr/08 02:33 AM
I would prefer to see editor selection as per Mauno's approach. There will always be demand for editors other than the default and supporting them does not divert QA from TinyMCE; in fact it allows for improvements to those other editors to get pushed back into Moodle rather than forcing developers to basically fork their Moodle when they want to use another editor. At Reed I have spent significant time integrating FCKeditor, including writing plugins that would probably be valuable at other institutions.

In addition, supporting multiple editors forces Moodle to remain editor-agnostic which will make the codebase more flexible in the (likely) event that the default editor changes in the future.


Mauno Korpelainen added a comment - 09/Apr/08 04:22 PM
Getting closer to administration module beta for TinyMCE... Editor test view is working and all init code is taken from database - it just needs some more changes to be more user friendly (I add some selection boxes and lists)

At the moment buttons of TinyMCE are taken from table mdl_tiny_buttons that has fields id, tinyid, row, order, button, help and plugin.

Buttons can be placed to rows 1-4 and row 0 means hidden button and order of buttons is selected by field order. If the button needs a plugin it is found from field plugin and field help is for help messages.

Testing, testing...


N Hansen added a comment - 17/Apr/08 05:31 AM
Can we safely assume at this point that TinyMCE will definitely become the default editor for Moodle?

N Hansen added a comment - 17/Apr/08 07:19 AM
11101 MUST be solved for TinyMCE to be considered functioning properly in Moodle.

Mauno Korpelainen added a comment - 18/Apr/08 01:00 AM
I have never seen MDL-11101 in TinyMCE or any other editor

It sounds more like a loop where counter is getting bigger al the time.


Mathieu Petit-Clair added a comment - 30/Apr/08 09:54 AM - edited
Trying to keep up with forum discussions about this issue :

Discussion going on at http://moodle.org/mod/forum/discuss.php?d=96160

An example of TinyMCE: http://moodle.org/mod/forum/discuss.php?d=88382 ... see http://www.host4learning.com/moodlemce/ for the demo site. This works quite well, except the smileys are not connected to Moodle's.


Mauno Korpelainen added a comment - 30/Apr/08 06:04 PM
Glen's integration works otherwise ok but it does not use any selection functions from lib files or administration. It just replaces textareas that have class "form-textarea" with editor and that integration needs to have htmlarea set disabled... If we want to use moodle smileys and administration of buttons we need to modify adminlib.php and lang/en_utf8/editor.php. If we want to use multi lang feature we need to build it for tinymce. If we want to have toggle button in tinymce we need to create it. If we want to use full xhtml rule set we need to set it to init code of timymce. If we want to let different roles use different settings we need to write the code for those settings. Theme integration is more flexible than current lib file integration but we simply need to add those features to theme files or some "selection files" like editorlib.php if we want to use theme integration in other editors with all features of current htmlarea.

Did you get my emails, Mathieu?

There are several ways to get all functions and moodle hacks to work. We may take all necessary functions away from lib files and place them either to (standard) theme meta.php (with selective include tags as well) or we may use weblib.php and function print_header to make the selection or...

It is also possible to replace configuration settings by exploding, imploding and replacing strings of settings like $cfg->editorhidebuttons if we want to have one default editor that has site wide settings in database and want to use same settings for all other editors - or we can create different settings for different editors.

By the way - I got Xinha to work with all htmlarea's settings - also image plugin. I still need to clean the rest of code and set up a public test site with all these editors.


Martin Dougiamas added a comment - 08/May/08 11:45 AM
I'm starting to add subtasks to make this happen in Moodle 2.0.

Martin Dougiamas added a comment - 08/May/08 11:56 AM
Once we get TinyMCE working in head by next week (minus all the Moodle functionality), let's analyse all of Mauno's great work and add more subtasks for each individual issue so that we can build up the Moodle functionality again in HEAD bit by bit using the lib/editormod plugins approach.

Mauno Korpelainen added a comment - 08/May/08 07:27 PM
Excellent!

In my previous tests I added moodle functionalities to tinymce with extra plugins (emoticons for moodle smilies and standardmenu for keyboard shortcuts and mouse right click menus + Glen's plugins moodleimage, moodlelink and dragmath with correct paths + files coursefiles.php & preview.php) and new editor theme (lib/editor/tinymce/jscripts/tiny_mce/themes/standard/editor_template.js has most settings of editor and multilang menu code). That way no code will get overwritten if tinymce is upgraded and you may have several configurations with different editor themes. Administration works ok for editorhidebuttons and smilies with small changes (correct names) to list of buttons in adminlib.php:

function admin_setting_special_editorhidebuttons() {
parent::admin_setting('editorhidebuttons', get_string('editorhidebuttons', 'admin'),
get_string('confeditorhidebuttons', 'admin'), array());
// weird array... buttonname => buttonimage (assume proper path appended). if you leave buttomimage blank, text will be printed instead
$this->items = array('fontselect' => '',
'bold' => 'bold.gif',
'italic' => 'italic.gif',
'underline' => 'underline.gif',
'strikethrough' => 'strikethrough.gif',
'sub' => 'sub.gif',
'sup' => 'sup.gif',
'copy' => 'copy.gif',
'cut' => 'cut.gif',
'paste' => 'paste.gif',
'cleanup' => 'cleanup.gif',
'undo' => 'undo.gif',
'redo' => 'redo.gif',
'code' => 'code.gif',
'spellchecker' => 'spellchecker.gif',
'fontsizeselect' => '',
'justifyleft' => 'justifyleft.gif',
'justifycenter' => 'justifycenter.gif',
'justifyright' => 'justifyright.gif',
'justifyfull' => 'justifyfull.gif',
'ltr' => 'ltr.gif',
'rtl' => 'rtl.gif',
'numlist' => 'numlist.gif',
'bullist' => 'bullist.gif',
'outdent' => 'outdent.gif',
'indent' => 'indent.gif',
'forecolor' => 'forecolor.gif',
'backcolor' => 'backcolor.gif',
'advhr' => 'advhr.gif',
'anchor' => 'anchor.gif',
'formatselect' => '',
'link' => 'link.gif',
'unlink' => 'unlink.gif',
'image' => 'image.gif',
'table' => 'table.gif',
'emotions' => 'emotions.gif',
'emoticons' => 'emoticons.gif',
'charmap' => 'charmap.gif',
'fullscreen' => 'fullscreen.gif',
'pastetext' => 'pastetext.gif',
'pasteword' => 'pasteword.gif',
'selectall' => 'selectall.gif',
'dragmath' => 'dragmath.gif',
'search' => 'search.gif',
'removeformat' => 'removeformat.gif',
'styleselect' => '',
'media' => 'media.gif',
'nonbreaking' => 'nonbreaking.gif',
'insertlayer' => 'insertlayer.gif');
}

and some rows later small change

$return .= ($value == '' ? get_string($key,'editor') :
'<img width="20" height="20" src="'.$CFG->wwwroot.'/lib/editor/tinymce/images/'.$value.'" alt="'.get_string($key,'editor').'" title="'.get_string($key,'editor').'" />').' ';

I tested also separating whole adminlib.php for different editors by code like this in adminlib.php:

<?php
global $USER, $CFG, $COURSE, $HTTPSPAGEREQUIRED;
if (!empty($USER->id)) {$eprof = intval($USER->htmleditor);}
else {$eprof = 1;}
include_once($CFG->dirroot.'/lib/editor/'.$eprof.'/adminlib.php');
?>

and then we can have totally different adminlib.php / settings for administration of each editor (or other things in moodle). For upgrading it might be better to keep adminlib.php unchanged and take just editor settings away to different editor administration. Things like background color of editor and fonts of editor are more css based settings and could be selected by editor theme - not site wide. It would be easier to change $cfg->editorhidebuttons to editor dependent setting - if we have just one config setting and we need to hide some button from all editors we either need to have all buttons and plugins in a long list and all icons for those buttons or hiding works only for those editors that use same name for button or plugin.

Martin,

THANK YOU!!!

This change gives a huge amount of new functionalities to moodle through editor themes and plugins. We may start creating all sorts of "widgets", forms, stamps, helpers etc straight to editors now and as Marc wished when developing Storytelling all sort of role based, activity bases, theme based, course based and user based editor settings become possible with TinyMCE and configurable editor.


Mauno Korpelainen added a comment - 09/May/08 04:19 PM
Some more tips/suggestions/ideas:

Development package of tinymce ( http://tinymce.moxiecode.com/download.php ) has a file called JSTrim that can clean up/compress javascript files - you only need to select files in JSTrim.config and for example tiny_mce_src.js is compressed to tiny_mce.js so that size of the file is about 30-50% of original size and scripts are nearly as much faster to load. I have used it after making changes to files.

To have less files in moodle all files editor_plugin_src.js inside all plugin folders can be deleted. They are just larger duplicates of editor_plugin.js

All files editor_template_src.js inside editor theme folders can be deleted - they are larger duplicates of files editor_template.js

And file tiny_mce_src.js is a larger duplicate of tiny_mce.js.

If editor themes advanced and simple are not used (supposing moodle has a custom theme "standard" etc.) both theme folders can be deleted.

If we create new moodle language files for tinymce most language files of tinymce can be deleted (we should probably leave en language files anyway)

Css of tinymce (and other editors) may need some separation of IE specific css. Current editor skins can be modified to better fit themes of moodle and skins/skin variants can also be selected separately for each theme of moodle.


Mauno Korpelainen added a comment - 10/May/08 02:18 AM
I tested some 3rd party activities like storytelling and we must most likely change one more thing:

In /lib/editorlib.php line 102:

  • array_push($CFG->editorsrc, "$editorbaseurl/tinymce/jscripts/tiny_mce/tiny_mce_gzip.php");

+ array_push($CFG->editorsrc, "$editorbaseurl/tinymce/jscripts/tiny_mce/tiny_mce.js");

to support old functions used through editorlib.php (Janne's special cases) in some 3rd party activities with method like

$editor = loadeditor($args); or $editor->starteditor('merge');

Otherwise we will have troubles with compressor init code and in some 3rd party activities editor does not render at all.


Mauno Korpelainen added a comment - 10/May/08 02:47 PM
Actually all Janne's integration files

lib/editorlib.php
lib/editor/tinymce/tinymce.class.php
lib/editor/tinymce/moodledialog.js
lib/editor/tinymce/moodlecontent.css
lib/editor/htmlarea/htmlarea.class.php

could be rewritten/checked to support Tinymce 3 and the methods that Janne has described in /lib/editor/neweditor_readme.txt (Special usage for Htmlarea and Tinymce). Some functions and plugins have changed from Tinymce 2.x to Tinymce 3.x and if tinymce.class.php is used the code should use existing theme and plugins.

The other alternative is that all 3rd party activities could use different editors and theme based init code and configuration with small changes to code of those activities. In standard activities moodle renders editor with functions print_textarea and use_html_editor and any other function could replace these functions to produce different editors with different init code in a more flexible way.


Mauno Korpelainen added a comment - 10/May/08 02:54 PM
I am not sure if there are other such activities than Storytelling that use Tinymce with Janne's $editor = loadeditor($args);

There may be a couple of such activities that use this method with htmlarea but I have not checked all 3rd party activities...only a couple of them...


Mauno Korpelainen added a comment - 10/May/08 03:04 PM
And if custom editors are allowed (selectable editors) any 3rd party activity can have as many custom editors as the writers of those activities want...

It is just a matter of setting the correct init code for the editor we want to use in some activity - one file can define the init code and functions and use the existing editor (htmlarea, tinymce, xinha, fckeditor, yuirte etc)


Mauno Korpelainen added a comment - 20/May/08 08:25 PM
One update - I have a functional and simple translation system ready - translation strings of tinymce for any language are in one php file and I should get a similar file for fckeditor ready soon. One question however: would it be better to leave some common strings like bold to lang/en_utf8/editor.php or is it better to move all editor language strings to files like lang/en_utf8/tinymce.php or lang/en_utf8/fckeditor.php so that if editor is removed or installed all language strings could follow?

If we separate also administration for editors we could use the same language files for settings like editorhidebuttons (button and plugin names) and lang/en_utf8/editor.php could have only such strings that are totally editor independent.


Mauno Korpelainen added a comment - 26/May/08 12:25 AM
Mathieu,

after testing fckeditor I might have found a way to avoid that use_admineditor and "double init code" for tinymce. I tested using a script:

window.onload = function ()
{
var alltextareas = document.getElementsByTagName("textarea");
for (var i=0; i < alltextareas.length; i++) {
if((alltextareas[i].className=='form-textarea') and (tinyMCE.getInstanceById(id) == null)) {
tinyMCE.execCommand('mceAddControl',false,'alltextareas[i].id');
}
}
}

for those parts of moodle where tinymce is not rendered with normal init code and it seems to work ok. I must investigate all code once again but during this week (probably on thursday) I should have a new test package ready with some missing features added and also fckeditor integrated to package.


Matt Gibson added a comment - 23/Jun/08 07:49 PM
Hi Mauno & everyone,

I've just been playing with wordpress and liked the 'display kitchen sink' button on the editor. It allows a toggle between minimal buttons and all buttons and would help a lot with my students. does tinymce have a similar button, or can one be added easily?


Mauno Korpelainen added a comment - 23/Jun/08 11:46 PM
Yes - it's possible to set different toolbar selectors to each editor - or skin selectors, language selectors... - check for example sample 4 in http://www.fckeditor.net/nightly/fckeditor/_samples/default.html for fckeditor.

We could use either custom plugins and functions inside editor toolbar or external buttons or selectors like the current toggle button. This was one of the ideas I had in mind when I was talking about the possibility to change editor by user (from editor profile or editor itself) but it could be possible to use with site wide default editors too for example with cookies. I still don't understand what's wrong with the approach to allow users to select editor if settings are defined so that students can't change any default settings of different editors...

Basicly it's the same logic as in changing theme - like selecting custom theme with user variable or cookie.


Mauno Korpelainen added a comment - 24/Jun/08 12:37 AM
And talking about tinymce we can create directly custom buttons or menus with custom functions and custom variables like for example in http://wiki.moxiecode.com/examples/tinymce/installation_example_21.php but those changes do not usually last longer than that one click if site configuration does not use those variables.

Custom buttons might be usefull for other purposes too - like switching from one "mode" to another (for example to show mathematics as equation with filter or as code in editor) or to add some pre-customized content (helper functions to build forms etc).


Mauno Korpelainen added a comment - 24/Jun/08 05:48 AM
Matt,

I checked that Wordpress button and the code for kitchenSink-button is one part of Wordpress spesific code in plugin called wordpress - and it uses cookie and custom editor setting wordpress_adv_hidden to show and hide the extra toolbar. It's not the only customized button if you look closer and extra keyboard shortcuts are defined in that same plugin. Thanks for the nice example, Matt!


Matt Gibson added a comment - 24/Jun/08 04:04 PM
No problem. Thanks for investigating

Ratana Lim added a comment - 14/Jan/09 10:11 AM
how about decoupling the rich text editor (RTE) and allowing the admin to chose which RTE is right for their installation? if not, i'd like to see tmc replace the current one.