TinyMCE buttons need to be updated

[Melissa Newman]

Requires Bug #869193 to be fixed first (updating TinyMCE to version 3.4.6)

The following buttons needs to be activated

1. Image Button needs to be changed to AdvImage (no button change, just plugin)
2. Link button needs to be changed to AdvLink (no button change, just plugin)
3. Media button needs to be activated.
4. Insertdate button need to be activated
5. Inserttime button needs to be activated
6. outdent button needs to be activated
7. indent button needs to be activated
8. search button needs to be activated
9. replace button needs to be activated
10. styleprops button needs to be activated
11. styleselect button needs to be activated
12. advhr button needs to be activated

The following plugins need to be added:

advhr, advlink, advimage, insertdatetime, style, searchreplace, media, autosize

                $adv_buttons = array(
                    "undo,redo,separator,bold,italic,underline,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,bullist,numlist,separator,link,unlink,separator,code,fullscreen",
                    "bold,italic,underline,strikethrough,separator,forecolor,backcolor,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,advhr,emotions,image,media,spellchecker,cleanup,separator,link,unlink,separator,insertdate,inserttime,code,fullscreen",
                    "undo,redo,separator,bullist,numlist,separator,tablecontrols,separator,cut,copy,paste,pasteword,separator,outdent,indent,blockquote,search,replace",
                    "styleprops,styleselect,fontselect,separator,fontsizeselect,separator,formatselect,removeformat",
                );

    plugins: "table,emotions,spellchecker,inlinepopups,paste,fullscreen,tabfocus,advhr,advlink,advimage,insertdatetime,style,searchreplace,media,autoresize",

[Andrew Nicols (dobedobedoh)]

Hi Melissa,

Can you please summarise the effects of these changes and why they're required?

Thanks,

Andrew

[Melissa Newman (melissa-l)]

All of these items already exist in TinyMCE as standard buttons or plugins in the current version of TinyMCE. If one wants to argue about if they should or should not be included, then the alternative would be to create options in the configuration file. Then the end Administrator can decide if they would or would not like them included. I was actually planning to create that as another bug, but that is a lot more work than just turning on these options by default.

I have already discovered that on some dialog boxes (aka Resume and profile) that all of these buttons make those dialog editor boxes too large. That is a cosmetic issue, but it is an issue related to applying these changes.

This whole discussion got started, because the standard TinyMCE image button does not allow the access to Mahara files (images, etc.) I started to poke around TinyMCE's website and found the Advimage plugin that replaces the standard image button. That plugin combined with file_browser_callback and external_image_list_url, along with some custom Mahara code, can fix the Mahara image file issue. (This bug does not include any custom Mahara code -- just turning on standard TinyMCE options).

In summary, the more I looked at TinyMCE's website and the Mahara bugs and forum discussion the more I realized that the Mahara development team is not aware of the power of TinyMCE. TinyMCE is a very powerful editor, and to not allow Mahara's users to take advantage of its power does not make sense.

Even with this large list, I have not looked at all of the potential of TinyMCE. There is the ability to add quick keys, ability to hide the GuI buttons, accessability (screen reader) features ... the list goes on. There are even options to add source code that looks pretty (issue that comes up frequently in the forums).

Add to the list
Button: Advlist
Plugin: advlist

Summary:
Advlist - better list options
Advimage - better image options
Advlink - better link options
Advhr - Better horizontal ruler options
Media - Ability to add media (audio and video), only available in the current version of TinyMCE.
Insert date and insert time (not required, but they are nice to have ). All student documents usually have a date field. If a person is keeping a log of something they may want a time.
outdent and indent - changes the margin in or out (standard option in most editors).
search and replace - again, standard option in most editors (may not be a required one, but it is nice).
styprops - Very nice style dialog box. Nice to have
style selector - (that one needs to do a bit more testing of, but I think it is supposed to allow the user to select a style from a list of predefined styles.

[Melissa Newman (melissa-l)]

Maybe a temporary solution would be to create a Mahara Wiki page (from the first page or the development page) that includes instructions on how to modify the TinyMCE editor. I know that personally, it took a long time to even figure out that the code that I needed to modify was in lib/web.php.

[François Marier (fmarier)]

The wiki page is a really good idea. Are you able to get it started? I'm happy to review it and fill in the blanks if you have questions.

[Richard Mansfield (richard-mansfield)]

Just a reminder to whoever takes this on: please check that the "advimage" plugin doesn't cause any breakage in the custom image dialogue on the artefact/blog/post.php page.

[Melissa Newman (melissa-l)]

The two are completely unrelated to each other. That is the problem in the first place. The point of implementing the above items is so we can catch the file browser call to obtain access to a user's personal images through TinyMCE. But that is NOT what this bug is about. This bug is only about TinyMCE code. Nothing customized for Mahara. That is actually a separate bug. But Richard you are right, when that part of the project is done, thorough testing of the file plugin artefact as well as any place on Mahara that uses TinyMCE.

[Richard Mansfield (richard-mansfield)]

The two are related to each other, because the bugs you're talking about need to be fixed in the right order. When editing a blogpost, the tinymce image dialog gives the option to select from attached files as well as by url. Last time we broke that custom image dialog by mistake we got a lot of complaints, because users who knew about the attachment drop-down had to mess around copying and pasting urls.

If we add the advimage plugin and make no other changes, we will remove the attachment drop-down (just tried it), because advimage brings up a different dialog. So to avoid making things worse, we should have the magic "catching the file browser call" stuff in place and working *before* advimage is merged to master.

[Doris Tam (doristam)]

We are currently on 5.8.2 and the icons have been updated in the last couple versions.