mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-01-19 06:18:28 +01:00
Code Issues Projects Releases Wiki Activity

MDL-24507 new TinyMCE plugin moodleemoticon

Browse Source
This commit is contained in:
David Mudrak 2010-10-27 18:13:17 +00:00
parent b9fadae72d
commit ca7250661c
5 changed files with 215 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
lib/editor/tinymce/tiny_mce/3.3.9.2/plugins/moodleemoticon/dialog.php Normal file
View File

@ -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>

1
lib/editor/tinymce/tiny_mce/3.3.9.2/plugins/moodleemoticon/editor_plugin.js Normal file
View File

@ -0,0 +1 @@
(function(){tinymce.create('tinymce.plugins.MoodleEmoticon',{_emoticons:{},init:function(ed,url){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,})});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)});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){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)}});ed.addButton('moodleemoticon',{title:'moodleemoticon.desc',cmd:'mceMoodleEmoticon',image:url+'/img/moodleemoticon.gif'})},createControl:function(n,cm){return null},getInfo:function(){return{longname:'Moodle Emoticon plugin',author:'David Mudrak',authorurl:'http://mudrak.name',infourl:'http://moodle.org',version:"1.0"}}});tinymce.PluginManager.add('moodleemoticon',tinymce.plugins.MoodleEmoticon)})();

119
lib/editor/tinymce/tiny_mce/3.3.9.2/plugins/moodleemoticon/editor_plugin_src.js Normal file
View File

@ -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);
})();

BIN
lib/editor/tinymce/tiny_mce/3.3.9.2/plugins/moodleemoticon/img/moodleemoticon.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

9
lib/editor/tinymce/tiny_mce/3.3.9.2/plugins/moodleemoticon/js/dialog.js Normal file
View File

@ -0,0 +1,9 @@
var MoodleEmoticonDialog = {
insert : function(html) {
tinyMCEPopup.editor.execCommand('mceInsertContent', false, html);
tinyMCEPopup.close();
}
};
tinyMCEPopup.onInit.add(MoodleEmoticonDialog.init, MoodleEmoticonDialog);