Partiendo de este proyecto http://www.phpbb.com/community/viewtopic.php?f=72&t=1029315&start=0
voy a intentar explicar los pasos para añadir mis propios emoticonos.
Los ficheros que hay que modificar son:
tinymcejscriptstiny_mcepluginsbbcodeeditor_plugin.js
Este fichero es que el convierte html a bbcode y viceversa. Aquí meteremos las siguientes líneas:
// example: <strong> to [b]
rep(/<a.*?href="(.*?)".*?>(.*?)</a>/gi,"[url=$1]$2[/url]");
rep(/<font.*?color="(.*?)".*?class="codeStyle".*?>(.*?)</font>/gi,"[code][color=$1]$2[/color][/code]");
rep(/<font.*?color="(.*?)".*?class="quoteStyle".*?>(.*?)</font>/gi,"[quote][color=$1]$2[/color][/quote]");
rep(/<font.*?class="codeStyle".*?color="(.*?)".*?>(.*?)</font>/gi,"[code][color=$1]$2[/color][/code]");
rep(/<font.*?class="quoteStyle".*?color="(.*?)".*?>(.*?)</font>/gi,"[quote][color=$1]$2[/color][/quote]");
rep(/<span style="color: ?(.*?);">(.*?)</span>/gi,"[color=$1]$2[/color]");
rep(/<font.*?color="(.*?)".*?>(.*?)</font>/gi,"[color=$1]$2[/color]");
// font size
rep(/<span.*?style="font-size: 8px;">(.*?)</span>/gi,"[size=50]$1[/size]");
rep(/<font.*?style="font-size: 8px;">(.*?)</font>/gi,"[size=50]$1[/size]");
rep(/<span.*?style="font-size: 10px;">(.*?)</span>/gi,"[size=85]$1[/size]");
rep(/<font.*?style="font-size: 10px;">(.*?)</font>/gi,"[size=85]$1[/size]");
rep(/<span.*?style="font-size: 12px;">(.*?)</span>/gi,"$1");
rep(/<font.*?style="font-size: 12px;">(.*?)</font>/gi,"$1");
rep(/<span.*?style="font-size: 14px;">(.*?)</span>/gi,"[size=150]$1[/size]");
rep(/<font.*?style="font-size: 14px;">(.*?)</font>/gi,"[size=150]$1[/size]");
rep(/<span.*?style="font-size: 18px;">(.*?)</span>/gi,"[size=200]$1[/size]");
rep(/<font.*?style="font-size: 18px;">(.*?)</font>/gi,"[size=200]$1[/size]");
rep(/<span.*?style="font-size: 24px;">(.*?)</span>/gi,"[size=200]$1[/size]");
rep(/<font.*?style="font-size: 24px;">(.*?)</font>/gi,"[size=200]$1[/size]");
rep(/<span.*?style="font-size: 36px;">(.*?)</span>/gi,"[size=200]$1[/size]");
rep(/<font.*?style="font-size: 36px;">(.*?)</font>/gi,"[size=200]$1[/size]");
rep(/<font>(.*?)</font>/gi,"$1");
rep(/<img.*?src="(.*?)".*?/>/gi,"[img]$1[/img]");
// emoticons
rep(/[img]../jscripts/tiny_mce/plugins/emoticons/img/angry.gif[/img]/gi,"Y_Y");
rep(/[img]../jscripts/tiny_mce/plugins/emoticons/img/argh.gif[/img]/gi,":-@");
rep(/[img]../jscripts/tiny_mce/plugins/emoticons/img/bored.gif[/img]/gi,":-O");
rep(/[img]../jscripts/tiny_mce/plugins/emoticons/img/confused_smile.gif[/img]/gi,":-?");
rep(/[img]../jscripts/tiny_mce/plugins/emoticons/img/cry_smile.gif[/img]/gi,":'(");
rep(/[img]../jscripts/tiny_mce/plugins/emoticons/img/embaressed_smile.gif[/img]/gi,":-*)");
rep(/[img]../jscripts/tiny_mce/plugins/emoticons/img/furious.gif[/img]/gi,">:@");
rep(/[img]../jscripts/tiny_mce/plugins/emoticons/img/glasses.gif[/img]/gi,"8-)");
rep(/[img]../jscripts/tiny_mce/plugins/emoticons/img/indiferent.gif[/img]/gi,":-|");
rep(/[img]../jscripts/tiny_mce/plugins/emoticons/img/silent.gif[/img]/gi,":-x");
rep(/[img]../jscripts/tiny_mce/plugins/emoticons/img/omg_smile.gif[/img]/gi,":-D");
rep(/[img]../jscripts/tiny_mce/plugins/emoticons/img/party.gif[/img]/gi,"<:-)");
rep(/[img]../jscripts/tiny_mce/plugins/emoticons/img/regular_smile.gif[/img]/gi,":-)");
rep(/[img]../jscripts/tiny_mce/plugins/emoticons/img/sad_smile.gif[/img]/gi,":-(");
rep(/[img]../jscripts/tiny_mce/plugins/emoticons/img/saint.gif[/img]/gi,"O:-)");
rep(/[img]../jscripts/tiny_mce/plugins/emoticons/img/shades_smile.gif[/img]/gi,":-D");
// lists
rep(/<ul[^>]*>(.*?)</ul>/gi,"[list]n$1[/list]");
rep(/<ol style="list-style-type: lower-alpha;">(.*?)</ol>/gi,"[list=a]n$1[/list]");
rep(/<ol[^>]*>(.*?)</ol>/gi,"[list=1]n$1[/list]");
rep(/<li>(.*?)</li>/gi,"[*]$1n");
rep(/<span class="codeStyle">(.*?)</span>/gi,"[code]$1[/code]");
rep(/<span class="quoteStyle user_(.*?)">(.*?)</span>/gi,"[quote="$1"]$2[/quote]");
rep(/<span class="quoteStyle">(.*?)</span>/gi,"[quote]$1[/quote]");
rep(/<strong class="codeStyle">(.*?)</strong>/gi,"[code][b]$1[/b][/code]");
rep(/<strong class="quoteStyle">(.*?)</strong>/gi,"[quote][b]$1[/b][/quote]");
rep(/<em class="codeStyle">(.*?)</em>/gi,"[code][i]$1[/i][/code]");
rep(/<em class="quoteStyle">(.*?)</em>/gi,"[quote][i]$1[/i][/quote]");
rep(/<u class="codeStyle">(.*?)</u>/gi,"[code][u]$1[/u][/code]");
rep(/<u class="quoteStyle">(.*?)</u>/gi,"[quote][u]$1[/u][/quote]");
rep(/</(strong|b)>/gi,"[/b]");
rep(/<(strong|b)>/gi,"[b]");
rep(/</(em|i)>/gi,"[/i]");
rep(/<(em|i)>/gi,"[i]");
rep(/</u>/gi,"[/u]");
rep(/<span style="text-decoration: ?underline;">(.*?)</span>/gi,"[u]$1[/u]");
rep(/<u>/gi,"[u]");
rep(/<blockquote[^>]*>/gi,"[quote]");
rep(/</blockquote>/gi,"[/quote]");
rep(/<br />/gi,"n");
rep(/<br/>/gi,"n");
rep(/<br>/gi,"n");
rep(/<p>/gi,"");
rep(/</p>/gi,"n");
rep(/&nbsp;/gi," ");
rep(/&quot;/gi,""");
rep(/</gi,"<");
rep(/&gt;/gi,">");
rep(/&amp;/gi,"&");
y,
// example: [b] to <strong>
rep(/n/gi,"<br />");
rep(/[b]/gi,"<strong>");
rep(/[/b]/gi,"</strong>");
rep(/[i]/gi,"<em>");
rep(/[/i]/gi,"</em>");
rep(/[u]/gi,"<u>");
rep(/[/u]/gi,"</u>");
rep(/[url=([^]]+)](.*?)[/url]/gi,"<a href="$1">$2</a>");
rep(/[url](.*?)[/url]/gi,"<a href="$1">$1</a>");
rep(/[img](.*?)[/img]/gi,"<img src="$1" />");
rep(/[color=(.*?)](.*?)[/color]/gi,"<font color="$1">$2</font>");
rep(/[code](.*?)[/code]/gi,"<span class="codeStyle">$1</span>&nbsp;");
rep(/[quote="(.*?)"](.*?)[/quote]/gi,"<span class="quoteStyle user_$1">$2</span>&nbsp;");
rep(/[quote.*?](.*?)[/quote]/gi,"<span class="quoteStyle">$1</span>&nbsp;");
// font size
rep(/[size=50](.*?)[/size]/gi,"<span style="font-size: 8px;">$1</span>");
rep(/[size=85](.*?)[/size]/gi,"<span style="font-size: 10px;">$1</span>");
rep(/[size=150](.*?)[/size]/gi,"<span style="font-size: 14px;">$1</span>");
rep(/[size=200](.*?)[/size]/gi,"<span style="font-size: 18px;">$1</span>");
// emoticons
//rep(/:D/gi, "<img src="./images/smilies/icon_e_biggrin.gif" />");
rep(/Y_Y/gi,"<img src="../jscripts/tiny_mce/plugins/emoticons/img/angry.gif" />");
rep(/:-@/gi,"<img src="../jscripts/tiny_mce/plugins/emoticons/img/argh.gif" />");
rep(/:-O/gi,"<img src="../jscripts/tiny_mce/plugins/emoticons/img/bored.gif" />");
rep(/:-?/gi,"<img src="../jscripts/tiny_mce/plugins/emoticons/img/confused_smile.gif" />");
rep(/:'(/gi,"<img src="../jscripts/tiny_mce/plugins/emoticons/img/cry_smile.gif" />");
rep(/:-*)/gi,"<img src="../jscripts/tiny_mce/plugins/emoticons/img/embaressed_smile.gif" />");
rep(/>:@/gi,"<img src="../jscripts/tiny_mce/plugins/emoticons/img/furious.gif" />");
rep(/8-)/gi,"<img src="../jscripts/tiny_mce/plugins/emoticons/img/glasses.gif" />");
rep(/:-|/gi,"<img src="../jscripts/tiny_mce/plugins/emoticons/img/indiferent.gif" />");
rep(/:-x/gi,"<img src="../jscripts/tiny_mce/plugins/emoticons/img/silent.gif" />");
rep(/:-D/gi,"<img src="../jscripts/tiny_mce/plugins/emoticons/img/omg_smile.gif" />");
rep(/<:-)/gi,"<img src="../jscripts/tiny_mce/plugins/emoticons/img/party.gif" />");
rep(/:-)/gi,"<img src="../jscripts/tiny_mce/plugins/emoticons/img/regular_smile.gif" />");
rep(/:-(/gi,"<img src="../jscripts/tiny_mce/plugins/emoticons/img/sad_smile.gif" />");
rep(/O:-)/gi,"<img src="../jscripts/tiny_mce/plugins/emoticons/img/saint.gif" />");
rep(/:-D/gi,"<img src="../jscripts/tiny_mce/plugins/emoticons/img/shades_smile.gif" />");
// lists
rep(/[list](.*?)[/list]/gi, "<ul><li>$1</li></ul>");
rep(/[list=1](.*?)[/list]/gi, "<ol><li>$1</li></ol>");
rep(/[list=a](.*?)[/list]/gi, "<ol style="list-style-type: lower-alpha;"><li>$1</li></ol>");
rep(/[*]/g, "</li><li>");
// fix empty li's
rep(/<li><br /></li>/g, "");
rep(/<li/>/g, "");
Lo correcto hubiera sido crear un plugin nuevo, pero bueno.
Crear un plugin nuevo emoticons (a partir de "emotions")
Este es el plugin que se encargará de insertar los emoticonos al hacer click en el icono correspondiente. Por lo tanto, hay que añadir los «.gif» que queramos usar y su correspondiente ruta en «editor_plugin.js»
Z:SINCROdevwwwcriticame – actualcriticamebintinymcejscriptstiny_mcethemesadvancedskinsdefaultui.css
Añadir la siguiente línea para que muestre el botón del plugin anterior:
.defaultSkin span.mce_emoticons {background-position:-60px -20px}
Script de ayuda
Para generar las líneas anteriores podemos usar este script:
$emoticonos = array(
"angry.gif" => "Y_Y",
"argh.gif" => ":-@",
"bored.gif" => ":-O",
"confused_smile.gif" => ":-?",
"cry_smile.gif" => ":'(",
"embaressed_smile.gif" => ":-*)",
"furious.gif" => ">:@",
"glasses.gif" => "8-)",
"indiferent.gif" => ":-|",
"silent.gif" => ":-x",
"omg_smile.gif" => ":-D",
"party.gif" => "<:-)",
"regular_smile.gif" => ":-)",
"sad_smile.gif" => ":-(",
"saint.gif" => "O:-)",
"shades_smile.gif" => ":-D"
);
// Esto es para editor_plugin.js
foreach ($emoticonos as $filename => $atajo) {
$html = ' ";
$html .= "
n";
print $html;
}
print "n";
foreach ($emoticonos as $filename => $atajo) {
$filename = str_replace(".", ".", $filename);
$atajo = str_replace(""",""", $atajo);
?>
rep(/[img]../jscripts/tiny_mce/plugins/emoticons/img/[/img]/gi,"");
}
print "n";
// y esto también es para editor_plugin.js
foreach ($emoticonos as $filename => $atajo) {
$atajo = str_replace(""",""", $atajo);
$atajo = str_replace("*","*", $atajo);
$atajo = str_replace("'","'", $atajo);
$atajo = str_replace("|","|", $atajo);
$atajo = str_replace("?","?", $atajo);
print "rep(/$atajo/gi,"");n";
}
print "n";
?>
Deja una respuesta