MDL-24507 new TinyMCE plugin moodleemoticon

moodle · Oct 27, 2010 · ca72506 · ca72506
1 parent b9fadae
commit ca72506
Show file tree

Hide file tree

Showing 5 changed files with 215 additions and 0 deletions.
diff --git a/lib/editor/tinymce/tiny_mce/3.3.9.2/plugins/moodleemoticon/dialog.php b/lib/editor/tinymce/tiny_mce/3.3.9.2/plugins/moodleemoticon/dialog.php
@@ -0,0 +1,86 @@
+<?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/>.
+
+/**
+ * Displays the TinyMCE popup window to insert a Moodle emoticon
+ *
+ * @package    tinymceplugin
+ * @subpackage moodleemoticon
+ * @copyright  2010 David Mudrak <david@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+define('NO_MOODLE_COOKIES', true); // Session not used here
+define('NO_UPGRADE_CHECK', true);  // Ignore upgrade check
+
+require_once(dirname(dirname(dirname(dirname(dirname(dirname(dirname(dirname(__FILE__)))))))) . '/config.php');
+
+$PAGE->set_context(get_system_context());
+
+$emoticonmanager = get_emoticon_manager();
+$stringmanager = get_string_manager();
+
+?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <title><?php print_string('moodleemoticon:desc', 'editor_tinymce'); ?></title>
+    <script type="text/javascript" src="../../tiny_mce_popup.js?v={tinymce_version}"></script>
+    <script type="text/javascript" src="js/dialog.js?v={tinymce_version}"></script>
+</head>
+<body>
+
+    <table border="0" align="center" style="width:100%;">
+<?php
+
+$emoticons = $emoticonmanager->get_emoticons();
+// this is tricky - we must somehow include the information about the original
+// emoticon text so that we can replace the image back with it on editor save.
+// so we are going to encode the index of the emoticon. this will break when the
+// admin changes the mapping table while the user has the editor opened
+// but I am not able to come with better solution at the moment :-/
+$index = 0;
+foreach ($emoticons as $emoticon) {
+    $txt = $emoticon->text;
+    $img = $OUTPUT->render(
+        $emoticonmanager->prepare_renderable_emoticon($emoticon, array('class' => 'emoticon emoticon-index-'.$index++)));
+    if ($stringmanager->string_exists($emoticon->altidentifier, $emoticon->altcomponent)) {
+        $alt = get_string($emoticon->altidentifier, $emoticon->altcomponent);
+    } else {
+        $alt = '';
+    }
+    echo html_writer::tag('tr',
+            html_writer::tag('td', $img, array('style' => 'width:20%;text-align:center;')) .
+            html_writer::tag('td', s($txt), array('style' => 'width:40%;text-align:center;font-family:monospace;')) .
+            html_writer::tag('td', $alt),
+        array(
+            'onMouseOver' => 'this.style.backgroundColor="white"',
+            'onMouseOut'  => 'this.style.backgroundColor="transparent"',
+            'onClick'     => 'MoodleEmoticonDialog.insert(' . json_encode($img) . ')',
+        )
+    );
+}
+
+?>
+    </table>
+
+    <div class="mceActionPanel">
+        <input type="button" id="cancel" name="cancel" value="{#cancel}" onclick="tinyMCEPopup.close();" />
+    </div>
+
+</body>
+</html>
diff --git a/lib/editor/tinymce/tiny_mce/3.3.9.2/plugins/moodleemoticon/editor_plugin.js b/lib/editor/tinymce/tiny_mce/3.3.9.2/plugins/moodleemoticon/editor_plugin.js
diff --git a/lib/editor/tinymce/tiny_mce/3.3.9.2/plugins/moodleemoticon/editor_plugin_src.js b/lib/editor/tinymce/tiny_mce/3.3.9.2/plugins/moodleemoticon/editor_plugin_src.js
@@ -0,0 +1,119 @@
+/**
+ * TinyMCE plugin MoodleEmoticon - provides GUI to insert emoticon images
+ *
+ * Based on the example plugin (c) 2009 Moxiecode Systems AB
+ *
+ * @author  David Mudrak <david@moodle.com>
+ * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+(function() {
+    tinymce.create('tinymce.plugins.MoodleEmoticon', {
+
+        /**
+         * Holds the list of emoticons provided by emoticon_manager
+         *
+         * @private
+         */
+        _emoticons : {},
+
+        /**
+         * 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) {
+            // Register the command so that it can be invoked by using tinyMCE.activeEditor.execCommand('mceMoodleEmoticon');
+            ed.addCommand('mceMoodleEmoticon', function() {
+                lang = ed.getParam('language');
+                ed.windowManager.open({
+                    file : url + '/dialog.php?lang=' + lang ,
+                    width : 250 + parseInt(ed.getLang('moodleemoticon.delta_width', 0)),
+                    height : 400 + parseInt(ed.getLang('moodleemoticon.delta_height', 0)),
+                    inline : 1
+                }, {
+                    plugin_url : url, // Plugin absolute URL
+                });
+            });
+
+            // Add an observer to the onInit event to convert emoticon texts to images
+            ed.onInit.add(function(ed) {
+                var data = ed.getContent();
+                this._emoticons = tinymce.util.JSON.parse(ed.getParam('moodleemoticon_emoticons'));
+                for (var emotxt in this._emoticons) {
+                    data = data.replace(emotxt, this._emoticons[emotxt]);
+                }
+                ed.setContent(data);
+            });
+
+            // Add an observer to the onPreProcess event to convert emoticon images to texts
+            ed.onPreProcess.add(function(ed, o) {
+                if (o.save) {
+                    tinymce.each(ed.dom.select('img.emoticon', o.node), function(image) {
+                        var emoticontxt = '';
+                        var matches = /^emoticon emoticon-index-([0-9]+)$/.exec(image.className);
+                        if (matches.length != 2) {
+                            // this is not valid emoticon image inserted via dialog
+                            // return true so that each() does not halt
+                            return true;
+                        }
+                        var index = matches[1];
+                        var search = new RegExp('class="emoticon emoticon-index-'.concat(index, '"'));
+                        for (var emotxt in this._emoticons) {
+                            if (search.test(this._emoticons[emotxt])) {
+                                emoticontxt = emotxt;
+                                break;
+                            }
+                        }
+                        if (emoticontxt) {
+                            ed.dom.setOuterHTML(image, emoticontxt);
+                        }
+                    }, this);
+                }
+            });
+
+            // Register moodleemoticon button
+            ed.addButton('moodleemoticon', {
+                title : 'moodleemoticon.desc',
+                cmd : 'mceMoodleEmoticon',
+                image : url + '/img/moodleemoticon.gif'
+            });
+        },
+
+        /**
+         * Creates control instances based in the incomming name. This method is normally not
+         * needed since the addButton method of the tinymce.Editor class is a more easy way of adding buttons
+         * but you sometimes need to create more complex controls like listboxes, split buttons etc then this
+         * method can be used to create those.
+         *
+         * @param {String} n Name of the control to create.
+         * @param {tinymce.ControlManager} cm Control manager to use inorder to create new control.
+         * @return {tinymce.ui.Control} New control instance or null if no control was created.
+         */
+        createControl : function(n, cm) {
+            return null;
+        },
+
+        /**
+         * 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 : 'Moodle Emoticon plugin',
+                author : 'David Mudrak',
+                authorurl : 'http://mudrak.name',
+                infourl : 'http://moodle.org',
+                version : "1.0"
+            };
+        }
+    });
+
+    // Register plugin
+    tinymce.PluginManager.add('moodleemoticon', tinymce.plugins.MoodleEmoticon);
+})();
diff --git a/lib/editor/tinymce/tiny_mce/3.3.9.2/plugins/moodleemoticon/img/moodleemoticon.gif b/lib/editor/tinymce/tiny_mce/3.3.9.2/plugins/moodleemoticon/img/moodleemoticon.gif
diff --git a/lib/editor/tinymce/tiny_mce/3.3.9.2/plugins/moodleemoticon/js/dialog.js b/lib/editor/tinymce/tiny_mce/3.3.9.2/plugins/moodleemoticon/js/dialog.js
@@ -0,0 +1,9 @@
+var MoodleEmoticonDialog = {
+
+    insert : function(html) {
+        tinyMCEPopup.editor.execCommand('mceInsertContent', false, html);
+        tinyMCEPopup.close();
+    }
+};
+
+tinyMCEPopup.onInit.add(MoodleEmoticonDialog.init, MoodleEmoticonDialog);