MDL-37565 - HTMLEditor - Adding a toggle plugin to TinyMCE to improve the appearance of the editor

lib/editor/tinymce/db/upgrade.php

@@ -45,5 +45,29 @@ function xmldb_editor_tinymce_upgrade($oldversion) {
     // Put any upgrade step following this.
 
 
+    // Moodle v2.6.0 release upgrade line.
+    // Put any upgrade step following this.
+
+    if ($oldversion < 2013061400) {
+        // Reset redesigned editor toolbar setting.
+        $oldorder = "fontselect,fontsizeselect,formatselect,|,undo,redo,|,search,replace,|,fullscreen
+
+bold,italic,underline,strikethrough,sub,sup,|,justifyleft,justifycenter,justifyright,|,cleanup,removeformat,pastetext,pasteword,|,forecolor,backcolor,|,ltr,rtl
+
+bullist,numlist,outdent,indent,|,link,unlink,|,image,nonbreaking,charmap,table,|,code";
+
+        $neworder = "formatselect,bold,italic,|,bullist,numlist,|,link,unlink,|,image
+
+undo,redo,|,underline,strikethrough,sub,sup,|,justifyleft,justifycenter,justifyright,|,outdent,indent,|,forecolor,backcolor,|,ltr,rtl,|,nonbreaking,charmap,table
+
+fontselect,fontsizeselect,code,search,replace,|,cleanup,removeformat,pastetext,pasteword,|,fullscreen";
+        $currentorder = get_config('editor_tinymce', 'customtoolbar');
+        if ($currentorder == $oldorder) {
+            unset_config('customtoolbar', 'editor_tinymce');
+            set_config('customtoolbar', $neworder, 'editor_tinymce');
+        }
+        upgrade_plugin_savepoint(true, 2013061400, 'editor', 'tinymce');
+    }
+
     return true;
 }

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

@@ -30,7 +30,7 @@ $string['availablebuttons'] = 'Available buttons';
 $string['customconfig'] = 'Custom configuration';
 $string['customconfig_desc'] = 'Custom advanced TinyMCE configuration in JSON format, for example: {"option1" : "value2", "option2" : "value2"}. Any options specified here override standard and plugin settings.';
 $string['customtoolbar'] = 'Editor toolbar';
-$string['customtoolbar_desc'] = 'Each line contains a list of comma separated button names, use "|" as a group separator, empty lines are ignored. See <a href="{$a}" target="_blank">{$a}</a> for the list of default TinyMCE buttons.';
+$string['customtoolbar_desc'] = 'Each line contains a list of comma separated button names, use "|" as a group separator, empty lines are ignored. See <a href="{$a}" target="_blank">{$a}</a> for the list of default TinyMCE buttons.<br />The first row will always be shown, where as the visibility of second and third toolbars can be toggled';
 $string['fontselectlist'] = 'Available fonts list';
 $string['pluginname'] = 'TinyMCE HTML editor';
 $string['settings'] = 'General settings';

lib/editor/tinymce/plugins/moodlemedia/lib.php

@@ -37,14 +37,14 @@ class tinymce_moodlemedia extends editor_tinymce_plugin {
             }
         }
 
-        // Add button after emoticon button in advancedbuttons3.
-        $added = $this->add_button_after($params, 3, 'moodlemedia', 'moodleemoticon', false);
+        // Add button after emoticon button in advancedbuttons1.
+        $added = $this->add_button_after($params, 1, 'moodlemedia', 'moodleemoticon', false);
 
         // Note: We know that the emoticon button has already been added, if it
         // exists, because I set the sort order higher for this. So, if no
         // emoticon, add after 'image'.
         if (!$added) {
-            $this->add_button_after($params, 3, 'moodlemedia', 'image');
+            $this->add_button_after($params, 1, 'moodlemedia', 'image');
         }
 
         // Add JS file, which uses default name.

lib/editor/tinymce/plugins/moodlenolink/lib.php

@@ -30,8 +30,8 @@ class tinymce_moodlenolink extends editor_tinymce_plugin {
     protected function update_init_params(array &$params, context $context,
             array $options = null) {
 
-        // Add button after 'unlink' in advancedbuttons3.
-        $this->add_button_after($params, 3, 'moodlenolink', 'unlink');
+        // Add button after 'unlink' in advancedbuttons1.
+        $this->add_button_after($params, 1, 'moodlenolink', 'unlink');
 
         // Add JS file, which uses default name.
         $this->add_js_plugin($params);

lib/editor/tinymce/plugins/pdw/lang/en/tinymce_pdw.php

@@ -0,0 +1,28 @@
+<?php
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Strings for 'Toolbar Toggle' plugin.
+ *
+ * @package   tinymce_pdw
+ * @copyright 2013 Jason Fowler
+ * @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+$string['pluginname'] = 'Toolbar Toggle';
+
+/* All lang strings used from TinyMCE JavaScript code must be named 'pluginname:stringname', no need to create langs/en_dlg.js */
+$string['pdw:desc'] = 'Toolbar Toggle';

lib/editor/tinymce/plugins/pdw/lib.php

@@ -0,0 +1,39 @@
+<?php
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+defined('MOODLE_INTERNAL') || die();
+
+/**
+ * Plugin for Moodle 'Toolbar Toggle' button.
+ *
+ * @package   tinymce_pdw
+ * @copyright 2013 Jason Fowler
+ * @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+class tinymce_pdw extends editor_tinymce_plugin {
+    protected function update_init_params(array &$params, context $context,
+            array $options = null) {
+
+        // Add button before 'undo' in advancedbuttons1.
+        $this->add_button_before($params, 1, ' | ', '');
+        $this->add_button_before($params, 1, 'pdw_toggle', '');
+        $params['pdw_toggle_on'] = 1;
+        $params['pdw_toggle_toolbars'] = '2,3';
+
+        // Add JS file, which uses default name.
+        $this->add_js_plugin($params);
+    }
+}

lib/editor/tinymce/plugins/pdw/readme_moodle.txt

@@ -0,0 +1,13 @@
+Description of PDW Toolbar Toggle integration in Moodle
+=========================================================================================
+
+Copyright: Guido Neele (www.neele.name)
+License: MIT
+
+Moodle maintainer: Jason Fowler (phalacee)
+
+=========================================================================================
+Upgrade procedure:
+1/ extract standard PDW package into lib/editor/tinymce/plugins/pdw/tinymce/
+2/ bump up version.php
+3/ update lib/thirdpartylibs.xml

lib/editor/tinymce/plugins/pdw/tinymce/editor_plugin.js

@@ -0,0 +1,28 @@
+/**
+ * PDW Toggle Toolbars v1.2
+ * Url: http://www.neele.name
+ * Author: Guido Neele
+ * 
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ * Based on TinyMCE Wordpress plugin (Kitchen Sink)
+ */
+(function(){var d=tinymce.DOM;tinymce.PluginManager.requireLangPack("pdw");tinymce.create("tinymce.plugins.pdw",{init:function(a,h){var e=this,i=[],j=[],c;j=a.settings.pdw_toggle_toolbars.split(",");for(c=0;c<j.length;c++)i[c]=a.getParam("","toolbar"+j[c].replace(" ",""));a.addCommand("mcePDWToggleToolbars",function(){var f=a.controlManager,b,g,l=tinymce.util.Cookie,k,m=l.getHash("TinyMCE_toggle")||{};for(g=0;g<i.length;g++){obj=a.controlManager.get(i[g]);if(typeof obj!="undefined"){b=obj.id;if(d.isHidden(b)){k=
+0;d.show(b);e._resizeIframe(a,i[g],-26)}else{k=1;d.hide(b);e._resizeIframe(a,i[g],26)}}}f.setActive("pdw_toggle",k);a.settings.pdw_toggle_on=k;m[a.id]=k;l.setHash("TinyMCE_toggle",m)});a.addButton("pdw_toggle",{title:a.getLang("pdw.desc",0),cmd:"mcePDWToggleToolbars",image:h+"/img/toolbars.gif"});a.onPostRender.add(function(){var f=tinymce.util.Cookie.getHash("TinyMCE_toggle")||{},b=false;if(f[a.id]==null)b=a.settings.pdw_toggle_on==1?true:false;else if(f[a.id]==1)b=true;if(b){f=a.controlManager;
+for(c=0;c<j.length;c++){tbId=a.getParam("","toolbar"+j[c].replace(" ",""));b=a.controlManager.get(tbId).id;f.setActive("pdw_toggle",1);d.hide(b);e._resizeIframe(a,tbId,26)}}})},_resizeIframe:function(a,h,e){h=a.getContentAreaContainer().firstChild;d.setStyle(h,"height",d.getSize(h).h+e);a.theme.deltaHeight+=e},getInfo:function(){return{longname:"PDW Toggle Toolbars",author:"Guido Neele",authorurl:"http://www.neele.name/",infourl:"http://www.neele.name/pdw_toggle_toolbars",version:"1.2"}}});tinymce.PluginManager.add("pdw",
+tinymce.plugins.pdw)})();

lib/editor/tinymce/plugins/pdw/tinymce/editor_plugin_src.js

@@ -0,0 +1,176 @@
+/**
+ * PDW Toggle Toolbars v1.2
+ * Url: http://www.neele.name
+ * Author: Guido Neele
+ * 
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ * Based on TinyMCE Wordpress plugin (Kitchen Sink)
+ * 
+ * Changes V1.1.1 --> V1.2
+ * 
+ * heeae made some modifications and posted his work on Sourceforge. I thought the cookie support 
+ * was really handy so I updated the script.
+ * http://sourceforge.net/tracker/?func=detail&atid=738747&aid=2904683&group_id=103281
+ *
+ * 1. Added cookie support.
+ * 2. Some optimization
+ * 3. Bug fix of fire ifr.clientHeight in FF 3 ( to DOM.getStyles)
+ *
+ * Thanks heeae!
+ * 
+ * Changes V1.1 --> V1.1.1
+ *
+ * Bugfix for Firefox 3.6. Caused error while loading script.
+ *
+ * Added lines 72 - 76:
+ *
+ * obj = ed.controlManager.get(tbIds[j]);
+ * if(typeof obj =="undefined") {
+ * 		continue;
+ * }
+ * id = obj.id;
+ *
+ * instead of:
+ *
+ * try {
+ *		id = ed.controlManager.get(tbIds[j]).id;
+ * }
+ * catch(e) {
+ * //if(typeof id == "undefined") continue;
+ * 		continue;
+ * }
+ *
+ * Thanks Anton for fixing this bug
+ * 
+ */
+
+(function() {
+	var DOM = tinymce.DOM;
+	tinymce.PluginManager.requireLangPack('pdw');
+	
+	tinymce.create('tinymce.plugins.pdw', {
+		/**
+		 * Initializes the plugin, this will be executed after the plugin has been created.
+		 * This call is done before the editor instance has finished it's initialization so use the onInit event
+		 * of the editor instance to intercept that event.
+		 *
+		 * @param {tinymce.Editor} ed Editor instance that the plugin is initialized in.
+		 * @param {string} url Absolute URL to where the plugin is located.
+		 */
+		init : function(ed, url) {
+			var t = this, tbIds = new Array(), toolbars = new Array(), i;
+			
+			// Split toolbars
+			toolbars = (ed.settings.pdw_toggle_toolbars).split(',');
+			
+			for(i = 0; i < toolbars.length; i++){
+				tbIds[i] = ed.getParam('', 'toolbar' + (toolbars[i]).replace(' ',''));
+			}
+			
+			// Register the command so that it can be invoked by using tinyMCE.activeEditor.execCommand('mceExample');
+			ed.addCommand('mcePDWToggleToolbars', function() {
+			
+				var cm = ed.controlManager, id, j, Cookie = tinymce.util.Cookie, Toggle_PDW, Toggle = Cookie.getHash("TinyMCE_toggle") || new Object();
+				for(j = 0; j < tbIds.length; j++){
+					
+					obj = ed.controlManager.get(tbIds[j]);
+                    if(typeof obj =="undefined") {
+                        continue;
+                    }
+                    id = obj.id;
+					
+					if (DOM.isHidden(id)) {
+						Toggle_PDW = 0;
+						DOM.show(id);
+						t._resizeIframe(ed, tbIds[j], -26);
+						
+					} else {
+						Toggle_PDW = 1;
+						DOM.hide(id);
+						t._resizeIframe(ed, tbIds[j], 26);
+					}
+				}
+				cm.setActive('pdw_toggle', Toggle_PDW);
+				ed.settings.pdw_toggle_on = Toggle_PDW;
+				Toggle[ed.id] = Toggle_PDW;
+				Cookie.setHash("TinyMCE_toggle", Toggle);
+			});
+			
+			// Register pdw_toggle button
+			ed.addButton('pdw_toggle', {
+				title : ed.getLang('pdw.desc', 0),
+				cmd : 'mcePDWToggleToolbars',
+				image : url + '/img/toolbars.gif'
+			});
+			
+			ed.onPostRender.add(function(){
+				var toggle = tinymce.util.Cookie.getHash("TinyMCE_toggle") || new Object();
+				var run = false;
+				
+				// Check if value is stored in cookie
+				if(toggle[ed.id] == null){
+					// No cookie so check if the setting pdw_toggle_on is set to 1 then hide toolbars and set button active
+					run = ed.settings.pdw_toggle_on == 1 ? true : false;
+				} else if(toggle[ed.id] == 1){
+					run = true;
+				}
+			
+				if (run) {
+
+					var cm = ed.controlManager, tdId, id;
+					
+					for(i = 0; i < toolbars.length; i++){
+						tbId = ed.getParam('', 'toolbar' + (toolbars[i]).replace(' ',''));
+						id = ed.controlManager.get(tbId).id;
+						cm.setActive('pdw_toggle', 1);
+						DOM.hide(id);
+						t._resizeIframe(ed, tbId, 26);
+					}
+				}
+			});
+		},
+		
+		// Resizes the iframe by a relative height value
+		_resizeIframe : function(ed, tb_id, dy) {
+			var ifr = ed.getContentAreaContainer().firstChild;
+			
+			DOM.setStyle(ifr, 'height',DOM.getSize(ifr).h + dy); // Resize iframe
+			ed.theme.deltaHeight += dy; // For resize cookie
+		},
+
+		/**
+		 * Returns information about the plugin as a name/value array.
+		 * The current keys are longname, author, authorurl, infourl and version.
+		 *
+		 * @return {Object} Name/value array containing information about the plugin.
+		 */
+		getInfo : function() {
+			return {
+				longname : 'PDW Toggle Toolbars',
+				author : 'Guido Neele',
+				authorurl : 'http://www.neele.name/',
+				infourl : 'http://www.neele.name/pdw_toggle_toolbars',
+				version : "1.2"
+			};
+		}
+	});
+
+	// Register plugin
+	tinymce.PluginManager.add('pdw', tinymce.plugins.pdw);
+})();

lib/editor/tinymce/plugins/pdw/tinymce/langs/en.js

@@ -0,0 +1,3 @@
+tinyMCE.addI18n('en.pdw',{
+	desc : 'Show/hide toolbars'
+});

lib/editor/tinymce/plugins/pdw/tinymce/langs/nl.js

@@ -0,0 +1,3 @@
+tinyMCE.addI18n('nl.pdw',{
+	desc : 'Toon/verberg werkbalken'
+});

lib/editor/tinymce/plugins/pdw/version.php

@@ -0,0 +1,32 @@
+<?php
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * TinyMCE image insert/edit plugin version details.
+ *
+ * @package   tinymce_pdw
+ * @copyright 2013 Jason Fowler
+ * @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+defined('MOODLE_INTERNAL') || die();
+
+// The current plugin version (Date: YYYYMMDDXX).
+$plugin->version   = 2013061400;
+// Required Moodle version.
+$plugin->requires  = 2013050100;
+// Full name of the plugin (used for diagnostics).
+$plugin->component = 'tinymce_pdw';

lib/editor/tinymce/settings.php

@@ -31,11 +31,11 @@ if ($ADMIN->fulltree) {
     require_once(__DIR__.'/adminlib.php');
     $settings->add(new tiynce_subplugins_settings());
     $settings->add(new admin_setting_heading('tinymcegeneralheader', new lang_string('settings'), ''));
-    $default = "fontselect,fontsizeselect,formatselect,|,undo,redo,|,search,replace,|,fullscreen
+    $default = "formatselect,bold,italic,|,bullist,numlist,|,link,unlink,|,image
 
-bold,italic,underline,strikethrough,sub,sup,|,justifyleft,justifycenter,justifyright,|,cleanup,removeformat,pastetext,pasteword,|,forecolor,backcolor,|,ltr,rtl
+undo,redo,|,underline,strikethrough,sub,sup,|,justifyleft,justifycenter,justifyright,|,outdent,indent,|,forecolor,backcolor,|,ltr,rtl,|,nonbreaking,charmap,table
 
-bullist,numlist,outdent,indent,|,link,unlink,|,image,nonbreaking,charmap,table,|,code";
+fontselect,fontsizeselect,code,search,replace,|,cleanup,removeformat,pastetext,pasteword,|,fullscreen";
     $settings->add(new admin_setting_configtextarea('editor_tinymce/customtoolbar',
         get_string('customtoolbar', 'editor_tinymce'), get_string('customtoolbar_desc', 'editor_tinymce', 'http://www.tinymce.com/wiki.php/Buttons/controls'), $default, PARAM_RAW, 100, 8));
     $settings->add(new admin_setting_configtextarea('editor_tinymce/fontselectlist',

lib/editor/tinymce/upgrade.txt

@@ -2,6 +2,10 @@ This files describes API changes in /lib/editor/tinymce/* - TinyMCE editor,
 information provided here is intended especially for developers.
 
 
+=== 2.6 ===
+
+* added a new plugin to toggle the 2nd and 3rd toolbars
+
 === 2.5 ===
 
 * update filter related code to use short filter names instead

lib/editor/tinymce/version.php

@@ -24,7 +24,7 @@
 
 defined('MOODLE_INTERNAL') || die();
 
-$plugin->version   = 2013050100;        // The current plugin version (Date: YYYYMMDDXX)
+$plugin->version   = 2013061400;        // The current plugin version (Date: YYYYMMDDXX)
 $plugin->requires  = 2013050100;        // Requires this Moodle version
 $plugin->component = 'editor_tinymce';  // Full name of the plugin (used for diagnostics)
 $plugin->release   = '3.5.8';           // This is NOT a directory name, see lib.php if you need to know where is the editor code!

lib/thirdpartylibs.xml

@@ -308,4 +308,11 @@
     <version>2012.08.22-20-00</version>
     <licenseversion></licenseversion>
   </library>
+  <library>
+    <location>lib/editor/tinymce/plugins/pdw/tinymce</location>
+    <name>PDW Toolbar Toggle</name>
+    <license>MIT</license>
+    <version>1.2</version>
+    <licenseversion></licenseversion>
+  </library>
 </libraries>