http://tinymce.moxiecode.com/examples/example_09.php#
Ese es el editor bbcode que existe en TinyMCE pero se echan demenos algunas características como son: las opciones de alinear el texto, el color de fondo, crear tablas, sangría, cortar , copiar, pegar, super indice, subindice, tachado y línea horizontal. He analizado los scripts de los editores, en particular el de Almsamim 0.0.8, y hay semejanzas en el código a la hora de pasar los datos de HTML a BBcode y de BBcode a HTML.
En mi opinón sería todo un logro integrar ese editor en los sistemas phpBB, de hecho tenemos prácticamente todo el trabajo hecho, lo único que falta es añadir las líneas de código para las opciones de formato que comenté antes.
Bien dicho esto paso a comentar lo que he analizado desde mi más profundo desconocimiento sobre javascript.
El editor tinymce tiene un script que consta de dos partes:
La primera que pasa el código bbcode a HTML, es decir, es la transformación que hace el script cuando por ejemplo editamos un mensaje. El texto con el bbcode almacenado en la base de datos pasa al área de edición, no sin antes ser transformado por el script, que transformará ese código bbcode a html y lo mostrará en el area del editor.
Código: Seleccionar todo
// BBCode -> HTML from PunBB dialect
_punbb_bbcode2html : function(s) {
s = tinymce.trim(s);
function rep(re, str) {
s = s.replace(re, str);
};
// 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> ");
rep(/\[quote=\"(.*?)\"\](.*?)\[\/quote\]/gi,"<span class=\"quoteStyle user_$1\">$2</span> ");
rep(/\[quote.*?\](.*?)\[\/quote\]/gi,"<span class=\"quoteStyle\">$
Código: Seleccionar todo
/ HTML -> BBCode in PunBB dialect
_punbb_html2bbcode : function(s) {
s = tinymce.trim(s);
function rep(re, str) {
s = s.replace(re, str);
};
// 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]
rep(/<font.*?color=\"(.*?)\".*?class=\"quoteStyle\".*?>(.*?)<\/font>/gi,"
");[color=$1]$2[/color]
rep(/<font.*?class=\"codeStyle\".*?color=\"(.*?)\".*?>(.*?)<\/font>/gi,"
Código: Seleccionar todo
[color=$1]$2[/color]
rep(/<font.*?class=\"quoteStyle\".*?color=\"(.*?)\".*?>(.*?)<\/font>/gi,"
");[color=$1]$2[/color]
rep(/<span style=\"color: ?(.*?);\">(.*?)<\/span>/gi,"[color=$1]$2[/color]");
rep(/<font.*?color=\"(.*?)\".*?>(.*?)<\/font>/gi,"[color=$1]$2[/color]");
// font size[/code]
Ahora aparece al revés, primero el HTML correspondiente y su equivalencia en BBcode. Si por mi fuera seguiría desarrollando el resto del código para adicionar lo que antes he mencionado.
Luego encontré en los scripts de los editores que mencioné un código prácticamente igual. Por ejemplo este está sacado del Almsamim 0.0.8 y es la parte de HTML a bbcode:
Creo que este es el que centra el texto.
Código: Seleccionar todo
r2(/\[center\]\[\/center\]/gi, "");
Bueno lo que pido es que si alguien se ofrece a explicarme un poco que es lo que significa cada cosa yo podría quizás con un poco de suerte añadir lo que falta. Se que si se sigue una lógica se puede lograr.
A parte de eso realizaría unas instrucciones, traducciones etc... para poder tener un editor de texto digno. Yo no se de otros administradores pero a mi puedo decir que el 95% de los fallos que me comentan los usuarios son por los editores bien sean HotEditor o Almsamim. Gracias por vuestra atención y si alguien se anima a ayudarme pues bienvenido sea. Espero respuestas. Saludos.