By CosminG on

Is there a WYSIWYG editor showing all of the smileys grouped for me to pick from as I’m creating a new node or Blog entry? That would be very nice.

⋅ Categories: Drupal 4.7.x

Comments

ryivhnn’s picture

ryivhnn commented

TinyMCE. Although replacing or modifying the smileys is a pain in the system, ridiculous amount of hard coding required.

works at bekandloz | plays at technonaturalist

CosminG’s picture

CosminG commented

:D I now, but is the ideea to have all the possible smiles there when some one writes and to be a click away.

ryivhnn’s picture

ryivhnn commented

Well, TinyMCE's smiley module will do it for ya :P

I'm in the process of adding and coding in a whole bunch of smileys for a site I'm working on. If I had enough brain capacity I'd rewrite the silly javascript with a php function that would recurse it's way through the folder so that all the smileys etc would be added automatically. I'm sure there's a way to do it in javascript too.

works at bekandloz | plays at technonaturalist

-hgn-’s picture

-hgn- commented

Any progress done? I would like to change the smiley set in TinyMCE, since the default emoticons are too high and they are creating spaces between lines.

Thank you

-------------------------------
www.Bossite.com
Live from Prague, Czech republic
-------------------------------

ryivhnn’s picture

ryivhnn commented

I haven't atually had time to look at it yet, been too busy. I will share it if I figure it out and someone doesn't do it in the meantime :)

works at bekandloz | plays at technonaturalist

NewToDruballer’s picture

NewToDruballer commented

Maybe my Quick'n dirty-rewrite of the smiley-popup might be interesting for you.

I created a file 'emotions.php' and putted it in the emotions-plugin directory of TinyMCE. The rewrite is as near as the hardcoded original as possible, because I do not know the Codebase of TinyMCE:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>{$lang_emotions_title}</title>
	<script language="javascript" type="text/javascript" src="../../tiny_mce_popup.js"></script>
	<script language="javascript" type="text/javascript" src="jscripts/functions.js"></script>
	<style type="text/css">* { list-style: none; border: 0; margin: 0; padding: 0;} li { float: left; padding: 10px; height: 20px; }</style>
</head>
<body onLoad="tinyMCEPopup.executeOnLoad('init();');" style="display: none">
	<div align="center">
		<div class="title">{$lang_emotions_title}:<br /><br /></div>
		<ul>
<?php
if(file_exists('./cache')) echo file_get_contents('./cache');
else {
	$smileydir='./images/';
	$allowedExt=array('.gif','.png','.jpg');
	$d = dir($smileydir);
	$output='';
	while (false !== ($entry = $d->read())) {
	   if(is_dir($smileydir.$entry) || strlen($entry)<4 || !in_array(substr($entry, -4), $allowedExt) || substr($entry, 0, 6)!='smiley') continue;
	   $info=getimagesize($smileydir.$entry);
	   array_unshift($allowedExt, '-', 'smiley');
	   $langName=str_replace($allowedExt, array('_', 'lang_emotions'), $entry); 
	   $output.="<li><a href=\"javascript:insertEmotion('$entry','$langName');\"><img src=\"images/$entry\" $info[3] alt=\"{\$$langName}\" title=\"{\$$langName}\" /></a></li>";
	}
	$d->close();
	file_put_contents('./cache', $output);
	echo $output;
}
?>		
		</ul>
	</div>
</body>
</html>

I changed the path to the popup in the editor_plugin.js and added the ability to scroll to the popup (remove spaces):

/**
 * $Id: editor_plugin_src.js 201 2007-02-12 15:56:56Z spocke $
 *
 * @author Moxiecode
 * @copyright Copyright © 2004-2007, Moxiecode Systems AB, All rights reserved.
 */

/* Import plugin specific language pack */
tinyMCE.importPluginLanguagePack('emotions');

// Plucin static class
var TinyMCE_EmotionsPlugin = {
	getInfo : function() {
		return {
			longname : 'Emotions',
			author : 'Moxiecode Systems AB',
			authorurl : 'http://tinymce.moxiecode.com',
			infourl : 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/emotions',
			version : tinyMCE.majorVersion + "." + tinyMCE.minorVersion
		};
	},

	/**
	 * Returns the HTML contents of the emotions control.
	 */
	getControlHTML : function(cn) {
		switch (cn) {
			case "emotions":
				return tinyMCE.getButtonHTML(cn, 'lang_emotions_desc', '{$pluginurl}/images/emotions.gif', 'mceEmotion');
		}

		return "";
	},

	/**
	 * Executes the mceEmotion command.
	 */
	execCommand : function(editor_id, element, command, user_interface, value) {
		// Handle commands
		switch (command) {
			case "mceEmotion":
				var template = new Array();

				template['file'] = '../../plugins/emotions/emotions.php'; // Relative to theme
				template['width'] = 250;
				template['height'] = 160;

				// Language specific width and height addons
				template['width'] += tinyMCE.getLang('lang_emotions_delta_width', 0);
				template['height'] += tinyMCE.getLang('lang_emotions_delta_height', 0);

				tinyMCE.openWindow(template, {editor_id : editor_id, inline : "yes", scrollbars: "yes"});

				return true;
		}

		// Pass to next handler in chain
		return false;
	}
};

// Register plugin
tinyMCE.addPlugin('emotions', TinyMCE_EmotionsPlugin);

You can now change/add/remove easily smileys. Just put them into the existing "emotions/images" directory. I stayed with the naming convention of the original. So your smileys have to be called "smiley-emotion.(gif|jpg|png)". If you wish, you can provide an alt-text for the image, by just modifying your "emotions/lang/<$your_lang>.js" file. Use the existing object to extend with the same convention "emotion : 'emotion description',"

I hope, this helps someone.

Markus

Kripsy’s picture

Kripsy commented

My php is pretty crude, but here is a version updated for TinyMCE 3.0:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>{#emotions_dlg.title}</title>
	<script type="text/javascript" src="../../tiny_mce_popup.js"></script>
	<script type="text/javascript" src="js/emotions.js"></script>
	<base target="_self" />
	<style type="text/css">* { list-style: none; border: 0; margin: 0; padding: 0;} li { float: left; padding: 10px; height: 20px; }</style>
</head>
<body style="display: none">
	<div align="center">
		<div class="title">{#emotions_dlg.title}:<br /><br /></div>
<ul>
<?php
if(file_exists('./cache')) echo file_get_contents('./cache');
else {
    $smileydir='./img/';
    $allowedExt=array('.gif','.png','.jpg');
    $d = dir($smileydir);
    $output='';
    while (false !== ($entry = $d->read())) {
       if(is_dir($smileydir.$entry) || strlen($entry)<4 || !in_array(substr($entry, -4), $allowedExt) || substr($entry, 0, 6)!='smiley') continue;
       $info=getimagesize($smileydir.$entry);
       array_unshift($allowedExt, '-', 'smiley');
       $temp=substr($entry,7,-4);
       $temp2=str_replace('-','_',$temp);
       $langName='emotions_dlg.'.$temp2;
       $output.="<li><a href=\"javascript:EmotionsDialog.insert('$entry','$langName');\"><img src=\"img/$entry\" $info[3] alt=\"{#$langName}\" title=\"{#$langName}\" /></a></li>";
    }
    $d->close();
    file_put_contents('./cache', $output);
    echo $output;
}
?>
</ul>
</div>
</body>
</html>

Very useful, thanks for the base!

maikreynolds’s picture

maikreynolds commented

Visit Hoteditor demo page and click Emotion icon - I saw Hoteditor displays happy face icons by category - pretty good feature. It supports Clipart and Wordart too.

http://ecardmax.com/hoteditor

Not sure how to get it works with Drupal, if you can integrate it to Drupal then please send me a instruction. Thanks

Hope this help