How to customize tinyMCE in Moodle 2.0 ?

How to customize tinyMCE in Moodle 2.0 ?

Jean-Michel Védrine -
回帖数:22

Hello,

Can somebody point me to docs how to customize tinyMCE in Moodle 2.0 adding tinyMCE plugins in a way that still permit futures upgrades in an easy way.

I do know how to add plugins to tinyMCE, but the problem is I also want to frequently upgrade my Moodle.

Thanks a lot.

回复Jean-Michel Védrine

Re: How to customize tinyMCE in Moodle 2.0 ?

Glenn Ansley -

Hi,

As far as I can tell, there's no way to register / Implement a TinyMCE plugin without placing custom folders inside the TinyMCE folder packaged with Moodle. Additionally, if your plugin is going to alter the buttons for TinyMCE you're going to have to edit some Moodle files.

Its frustrating to developers that have to maintain a large customization base, but the best thing you can do now is a good source control implentation.

回复Glenn Ansley

Re: How to customize tinyMCE in Moodle 2.0 ?

Jean-Michel Védrine -

Hello,

Yes both the tracker and the comments in the source tell that general and user editors preferences are not yet implemented.

But having to edit lib/editor/tinymce/lib.php at each upgrade is quite manageable for me so I will go that way.

I am still unsure of the best way for lang files of the plugins. I think I understand the process to generate Moodle lang files for tinymce from Moxiecode xml files, but that don't help me for extra plugins lang files.

Can somebody familiar with how lang strings are handled in Moodle tinymce help me ? Thanks

回复Jean-Michel Védrine

Re: How to customize tinyMCE in Moodle 2.0 ?

Mauno Korpelainen -

Core tinymce is using (cached) strings from file

lib/editor/tinymce/lang/en/editor_tinymce.php

also for plugins so if you add some custom plugin to core tinymce init code you can use strings in that plugin with code like

print_string('myplugin:mystring', 'editor_tinymce');

or

print_string('whateverstring', 'editor_tinymce');

Note that you may need to clear or disable language cache from administration menu to make changes visible.

If you don't want to edit core tinymce you can also add a totally new editor - I have 3 "extra versions": tinykids (still testing), tinymath (with math plugins) and ckeditor in my test moodle 2 - and for example for tinymath editor extra strings are read from file

lib/editor/tinymath/lang/en/editor_tinymath.php

The benefit of using several editors is also that you can test new features but do not need to "break" core moodle. Editor can be easily changed (for example in theme) with settings like

$CFG->texteditors = 'tinymath,textarea';

( default $CFG->texteditors = 'tinymce,textarea'; )

but I will send you more detailed info with that math plugin package you asked about in another post...most likely on next monday.

回复Mauno Korpelainen

Re: How to customize tinyMCE in Moodle 2.0 ?

Jean-Michel Védrine -

Thanks Mauno, but I have looked at the code, and in Moodle 2.x you don't really need to use print_string and php.

just putting

$string['pluginname:whateverstring'] = 'string value:';

or

$string['pluginname_dlg:whateverstring'] = 'string value:';

in the lib/editor/tinymce/lang/en/editor_tinymce.php file

and not modifying anything in the plugin or dialog code works because the lib/editor/tinymce/extra/strings.php script do the conversion "on the fly" to JS lang format

for instance if you have

$string['asciisvg_dlg:xmax'] = 'xmax:';

in lib/editor/tinymce/lang/en/editor_tinymce.php, you can use {#asciisvg_dlg.xmax}

in the asciisvgdlg file and it works

or if you have

$string['geonext:geonext_desc'] = 'Insert drawing';

in lib/editor/tinymce/lang/en/editor_tinymce.php, you can use the editor_plugin.js file of the geonext plugin without having to change anything in it !

That way most TinyMCE plugins can be integrated in Moodle unchanged. You just need to add the lang strings to lib/editor/tinymce/lang/en/editor_tinymce.php 大笑

I find the TinyMCE integration in Moodle 2.x very clever. Congrats to the people who did it 装酷 !

回复Jean-Michel Védrine

Re: How to customize tinyMCE in Moodle 2.0 ?

Mauno Korpelainen -

Kudos to Petr S., David M. and other developers for that lang file system.

The reason why I prefer different plugin php files compared to js files (plain editor_plugin.js) is that in php files you can add easier access control, configurable settings, optional parameters etc with simple tags like

 require("../../../../../../../config.php");
 $id = optional_param('id', SITEID, PARAM_INT);
 require_course_login($id);
 @header('Content-Type: text/html; charset=utf-8');

In moodle 2 the editor system is indeed very flexible as soon as you get familiar with all the options it offers and yes, it is possible to edit directly core tinymce files but it makes next upgrading more risky because new core files can sometimes overwrite old files - or you may need to keep control of all the edited files separately.

I did make some tiny changes to moodle 2 math plugins some months ago - for example jsxgrap filter had a tiny bug in moodle 1.9 and I changed the moodle 2 asciisvg plugin to place all the svg fallback images to moodledata subfolder which was not the case in moodle 1.9 asciisvg plugin. Most of the custom tinymce plugins (or ckeditor plugins with ckeditor) that use plain javascript can be used directly with init code of moodle 2 tinymce - just like you said - or they can be further customized to use some "moodle features"... 微笑

I just came home from a 1000 km trip and will check the rest of my plugins tomorrow...

回复Jean-Michel Védrine

Re: How to customize tinyMCE in Moodle 2.0 ?

Daniele Caldelli -

Hi, I think I have the same problem, so I will tell you what I do...

First of all, I transform the editor in a textarea in this way:

$mform->addElement('editor', 'content_editor', get_string('content'), null, $options);

in

$mform->addElement('textarea', 'content_textarea', get_string('content'), 'rows="15" cols="80"');

Then I write a javascript script where I build a new tinymce in my textarea. The script is:

$directionality = get_string('thisdirection', 'langconfig');
$strtime        = get_string('strftimetime');
$strdate        = get_string('strftimedaydate');
$lang           = current_language();
$contentcss     = $PAGE->theme->editor_css_url()->out(false);
$tinymce = new tinymce_texteditor();
echo '
<script type="text/javascript" language="javascript" src="'.$CFG->wwwroot.'/lib/xhprof/xhprof_html/jquery/jquery-1.2.6.js"></script>

<script type="text/javascript" language="javascript" src="'.$CFG->wwwroot.'/lib/editor/tinymce/tiny_mce/'.$tinymce->version.'/jquery.tinymce.js"></script>
<script type="text/javascript" language="javascript" src="'.$CFG->wwwroot.'/lib/editor/tinymce/tiny_mce/'.$tinymce->version.'/tiny_mce.js"></script>

<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
tinyMCE.init({
mode : "textareas",
theme : "advanced",
skin : "o2k7",
skin_variant : "silver",
plugins : "advimage,safari,table,style,layer,advhr,advlink,emotions,inlinepopups,searchreplace,paste,directionality,fullscreen,moodlenolink,nonbreaking,contextmenu,insertdatetime,save,iespell,preview,print,noneditable,visualchars,xhtmlxtras,template,pagebreak,spellchecker,dragmath,moodlemedia",
theme_advanced_buttons1 : "fontselect,fontsizeselect,formatselect,|,undo,redo,|,search,replace,|,fullscreen",
theme_advanced_buttons2 : "bold,italic,underline,strikethrough,sub,sup,|,justifyleft,justifycenter,justifyright,|,cleanup,removeformat,pastetext,pasteword,|,forecolor,backcolor,|,ltr,rtl",
theme_advanced_buttons3 : "bullist,numlist,outdent,indent,|,link,unlink,moodlenolink,|,image,moodlemedia,dragmath,nonbreaking,charmap,table,|,code,spellchecker,|,anchor",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
theme_advanced_fonts : "Trebuchet=Trebuchet MS,Verdana,Arial,Helvetica,sans-serif;Arial=arial,helvetica,sans-serif;Courier New=courier new,courier,monospace;Georgia=georgia,times new roman,times,serif;Tahoma=tahoma,arial,helvetica,sans-serif;Times New Roman=times new roman,times,serif;Verdana=verdana,arial,helvetica,sans-serif;Impact=impact;Wingdings=wingdings",
relative_urls : "false",
document_base_url : "'.$CFG->httpswwwroot.'",
content_css : "'.$contentcss.'",
language : "'.$lang.'",
directionality : "'.$directionality.'",
plugin_insertdate_dateFormat : "'.$strdate.'",
plugin_insertdate_timeFormat : "'.$strtime.'",
apply_source_formatting : "true",
remove_script_host : "false",
entity_encoding : "raw",
theme_advanced_resize_horizontal : "true",
theme_advanced_resizing : "true",
theme_advanced_toolbar_location : "top",
theme_advanced_statusbar_location : "bottom",
spellchecker_rpc_url : "'.$CFG->wwwroot.'/lib/editor/tinymce/tiny_mce/'.$tinymce->version.'/plugins/spellchecker/rpc.php"
});
});
//]]>
</script>
';

I put this script in the edit.php file, but I don't think this is the better place. This script recreate the same tinymce that we use usually.

I hope this can help you!!!

回复Jean-Michel Védrine

Re: How to customize tinyMCE in Moodle 2.0 ?

sam marshall -
Core developers的头像 Peer reviewers的头像 Plugin developers的头像

By the way, this is shaping up recently to be an important issue for us - not so much adding plugins, but removing buttons. In particular:

  • In 1.9 there was an options screen where you could turn off all the buttons in the HtmlArea-based editor.
  • In OU 1.9 we had the same options screen for TinyMCE (I think that was based on community work to integrate TinyMCE into 1.9).
  • In 2.0 there doesn't appear to be any such options screen 伤心

When it is just a plugin you can remove it by deleting a folder (although this is not very satisfactory as it may result in merge conflicts if the folder ever changes upstream) but there are some buttons which are presumably just 'part' of a plugin so you can't get rid of them by deleting a folder. (E.g. we want to turn off the font family/font size options, I don't think you can delete any single folder to make that happen.)

Does anyone have any insight as to a similar screen in 2.0 - obviously best case is that exists and I somehow didn't spot it! Worst case we might have to code it. 伤心

--sam

回复sam marshall

Re: How to customize tinyMCE in Moodle 2.0 ?

Mauno Korpelainen -

This is exactly the part of editor integration that Petr did not finish...

Yet there are several workarounds:

1) Editing the init code directly (lib/editor/tinymce/lib.php) and removing unnecessary buttons from lines

 'theme_advanced_buttons1'...
'theme_advanced_buttons1_add'...
...
'theme_advanced_buttons3_add'...

2) Using different editors with different init code

lib/editor/othereditor

with totally customizable code

This includes the option to use for example editor settings from lib/editor/youreditor/settings.php or for example adding a new filter that can add site wide filter settings to site configuration - in moodle 1.9 I used this approach in math filter that can be used (even if disabled) to add new settings page under filters in administration menu and called in editor init code with simple rules like

if ($CFG->filter_math_asciisvgpl) {$xasciisvg = 'asciisvg,';} else {$xasciisvg = '';}

and later in init code you can add/remove custom plugins or buttons with

{$xasciisvg}

in init code instead of pluginname asciisvg,

3) Javascript - for example yui user preferences - which could be implemented as well with custom theme the same way as splash theme changes colors if you want to allow user based editor toolbar selections  (some buttons or some editors from given options)

4) Theme based editor integrations or modifications of previous setting pages (editor settings, filter settings or user preferences) - jQuery or yui switchers etc.

I have tested all of these options and others may have a couple of more options but hopefully administration of core buttons and plugins will be added to core tinymce in the near future - for example with lib/editor/tinymce/settings.php (spellengine is there already) for a start.

 

 

回复Mauno Korpelainen

Re: How to customize tinyMCE in Moodle 2.0 ?

sam marshall -
Core developers的头像 Peer reviewers的头像 Plugin developers的头像

Thanks Mauno - that's really helpful.

We remain hopeful that somebody else adds this 微笑 but if they don't do so in time, I think we may take the approach to try to add it to the core editor (based on your info above that would be lib/editor/tinymce/settings.php and lib.php) and submit the change for inclusion in core, I guess probably for Moodle 2.2 timescale.

Basically if this just isn't there because Petr ran out of time, that's not so bad; I had been wondering if it was removed on purpose (if that had been the case,  there would potentially be objections if we wanted to add it back).

--sam

回复sam marshall

Re: How to customize tinyMCE in Moodle 2.0 ?

Anthony Borrow -
Core developers的头像 Plugin developers的头像 Testers的头像

Could we perhaps summarize some of this information and add it to an FAQ section in the Docs page TinyMCE. One question I frequently get is how to add a font family to the list and effectively enable a custom ttf font. Having some step by step instructions for that sort of thing would be grand. Peace - Anthony

回复Anthony Borrow

Re: How to customize tinyMCE in Moodle 2.0 ?

Derek Chirnside -

Will the new version in of TinyMCE 2.1 http://tracker.moodle.org/browse/MDL-27500 and http://docs.moodle.org/20/en/Moodle_2.1_release_notes#Other_highlights change anything to make this easier? (or short term documentation obsolete?)

-Derek

回复Derek Chirnside

Re: How to customize tinyMCE in Moodle 2.0 ?

Patrick Thibaudeau -

I have the same issue with several Moodle sites that I am supporting. So last night, I decided to fix the issue. I have created a TinyMCE configuration tool. With this tool you can enable disable default plugins and add new plugins. I did have to change the lib.php file to accomodate. Hopefully the good folks at Moodle will make this, or a similar system, core code. I know lots of administrators depend on adding TinyMCE features. You can download at the following link. https://github.com/patrickthibaudeau/moodle-local-mceconf/zipball/master

I will add as a plugin in the Moodle plugin database.

回复Patrick Thibaudeau

Re: How to customize tinyMCE in Moodle 2.0 ?

Mauno Korpelainen -

Basic idea there is ok and I believe Petr, Sam or somebody else (core developers) will implement some day such settings to core tinymce.

After a quick check there are a couple of "traps":

For example the plugins row. If you set in lib.php

'plugins' => "{$xmedia}{$defaultplugins}{$mceplugins}{$xemoticon}{$xdragmath}",

and mceconf_plugins has all plugins included unticking mceconf_default_plugins has no effect so default value of mceconf_plugins should probably be empty. Furthermore some plugins do not have buttons but their existence has influence to all other plugins, safari plugin is not at all needed in current init code of tinymce (it's a relic from old versions) and some math teachers might want to break that tex filter connection to dragmath plugin and enable it from plugins list like other plugin (can be disabled by default) because we can use dragmath for example with mathJax or asciimathml without tex filter...

Some plugins do have also conflicts with other plugins so if somebody for example updates files of tinymce directly from moxiecode and "accidentally" enables conflicting plugin content area can stop responding or some content can be lost and the toolbar button row code

                    'theme_advanced_buttons1' => "fontselect,fontsizeselect,formatselect",
                    'theme_advanced_buttons1_add' => "|,undo,redo,|,search,replace,|,fullscreen{$mcerow1}",
                    'theme_advanced_buttons2' => "bold,italic,underline,strikethrough,sub,sup,|,justifyleft,justifycenter,justifyright",
                    'theme_advanced_buttons2_add' => "|,cleanup,removeformat,pastetext,pasteword,|,forecolor,backcolor,|,ltr,rtl{$mcerow2}",
                    'theme_advanced_buttons3' => "bullist,numlist,outdent,indent,|,link,unlink,moodlenolink,|,image,{$xemoticon}{$xmedia}{$xdragmath}nonbreaking,charmap",
                    'theme_advanced_buttons3_add' => "table,|,code,spellchecker{$mcerow3}",

should be changed to allow hiding/showing of all the core buttons and selection lists separately (some plugins have more than one button).

Then we have those full screen mode wishes/issues (for example all the table buttons etc), user preferences (which buttons can be used by all users, which buttons need some user based selection/control...) and so on.

Settings

I did not know about this capability to use local settings.php so your post gave me lots of new ideas 微笑

What ever solution is used my rule of thumb has been that we should not need to edit core code to add some new features and in http://moodle.org/mod/forum/discuss.php?d=182627 I have used the idea of updating an extra editor (tinymath) which leaves core tinymce alone but ideally we should be able to control all settings of core editor.

回复Jean-Michel Védrine

Re: How to customize tinyMCE in Moodle 2.0 ?

Björn Fisseler -

Hello,

I'm desperatly trying to modify the tinyMCE included in Moodle 2.0, but cannot get it to work. I want to integrate a plugin called "language" to change the language of any written text, e.g. modify the mark-up for something like <span lang='de'>Hallo</span>. The plugin works fine and I was also able to integrate it into a copy of tinyMCE like Mauno suggested.

But when it comes to translate the interface of the plugin, Moodle does not work like other integrations of tinyMCE do. The basic directory structure looks like this:

  • editor\tinyeloq\tiny_mce\
  • editor\tinyeloq\tiny_mce\3.3.9.2\plugins
  • editor\tinyeloq\tiny_mce\3.3.9.2\plugins\language <-- this is the plugin directory
  • editor\tinyeloq\tiny_mce\3.3.9.2\plugins\language\langs <-- this is where the language files are normally stored, but they don't work for tiny within moodle

My question is, where do I have to put the language files for the plugin? What I understood so far is that Moodle retrieves the translation files for tinyMCE from a central cvs, but this won't work for third party plugins. But the regular translation management for tinyMCE won't work inside Moodle. What can I do now?

回复Björn Fisseler

Re: How to customize tinyMCE in Moodle 2.0 ?

Iñaki Arenaza -
Core developers的头像 Documentation writers的头像 Peer reviewers的头像 Plugin developers的头像
Have a look at MDL-25490 (especially at the 'Pull XXX diff URL' links)

I did basically what you are looking for, but after talking with several core developers in the developer chat it was decided to implement a more robust version of the multilang syntax (current one is rather fragile), and a new filter for it. But the implementation available at those links is fully functional with current multilang syntax.

Saludos.
Iñaki.
回复Iñaki Arenaza

Re: How to customize tinyMCE in Moodle 2.0 ?

Björn Fisseler -

I finally managed to install the "Multilang" plugin and learned something about the handling of translations within Moodles TinyMCE. The modifications to the "editor_tinymce.php" look like this:

$string['moodlelang:language'] = 'Sprache';

Then I tried to integrated the language plugin from EU4ALL. This plugin is called "language" and allows to select the language of any text within TinyMCE. Loading and displaying this plugin within the lib.php works just fine. Then I tried to translate the interface by adding something like the following to "editor_tinymce.php":

$string['language:desc'] = 'Sprache';

This should change the title attribute of the plugin button to "Sprache". But again, it does not work with TinyMCE inside of Moodle. This is how the plugin loads the language pack and then adds a button to the editors interface:

// Load plugin specific language pack
    tinymce.PluginManager.requireLangPack('language');
    
    tinymce.create('tinymce.plugins.LanguagePlugin', {
        [...]
            // Register language button
            ed.addButton('language', {
                title : 'language.desc',
                cmd : 'mceLanguage',
                image : url + '/img/language.gif'
            });

What it should do is to load the string from "language.desc" and display it as the title attribute of the image. But it does not refer to the corresponding string within "editor_tinymce.php". I don't understand how Iñaki manages to load the string properly so that I could mimic this for the EU4ALL plugin. Any ideas anyone?

回复Björn Fisseler

Re: How to customize tinyMCE in Moodle 2.0 ?

Mauno Korpelainen -

If your editor is called "tinyeloq" you can for example place the language strings to

lib/editor/tinyeloq/lang/en/editor_tinyeloq.php and corresponding folders (if you use something like

<?php print_string('yourstring', 'editor_tinyeloq'); ?>

in your plugins.

回复Björn Fisseler

Re: How to customize tinyMCE in Moodle 2.0 ?

Björn Fisseler -

Okay, I think my description of the problem is a little bit mistakable. The editor itself uses the correct language. But now I want to include a plugin for tinyMCE called "language". Normally you create a language file for the plugin and place it in the corresponding folder "langs" just below the plugin base directory. But this does not work for tinyMCE within moodle.

So I wonder where I can but the language files tinyMCE normally works with?

回复Björn Fisseler

Re: How to customize tinyMCE in Moodle 2.0 ?

Sam Mudle -

In Moodle 2.x, you add the localization strings to the following file:

/yourmoodledir/lib/editor/tinymce/lang/en/editor_tinymce.php

This is much different than the "normal" way of installing language for the TinyMCE module.  The moodle developers have hacked it in wierd.  I have successfully converted a Joomla plugin to Moodle 2.x which I document here:

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

I hope this helps...