Hagamos un editor WYSIWYG
Publicado: 05 Dic 2009, 14:34
Bueno me he decidido a compartir esta idea. Estoy seguro de que mucha gente quiere tener un editor de texto enriquecido o conocido como WYSIWYG. Yo he probado dos que creo que son los únicos que hay para phpbb, son Almsamim y Hot Editor. Cada cual tiene sus cosas buenas y malas. Pero si realmente me inclino por uno que me de confianza es el editor TinyMCE. Es uno de los mejores, incluso vBulletin tiene ya por defecto ese editor. He encontrado las instrucciones para implementar el editor TinyMCE en phpbb pero solo vienen en prosilver,el aspecto de este editor es el siguiente:
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.
Como vereís en el código aparece en primer lugar el bbcode y después el html correspondiente. Después en proceso contrario, es decir de HTML a BBcode, cuando escribimos en el editor y pasa esos datos HTML a BBcode para almacenarlos en la base de datos.
");
rep(/<font.*?color=\"(.*?)\".*?class=\"quoteStyle\".*?>(.*?)<\/font>/gi,"
rep(/<font.*?class=\"codeStyle\".*?color=\"(.*?)\".*?>(.*?)<\/font>/gi,"");
rep(/<font.*?class=\"quoteStyle\".*?color=\"(.*?)\".*?>(.*?)<\/font>/gi,"
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.
He intentado sustituir donde dice r2 por rep. Pero no he conseguido un resultado satisfactorio, es como si no hubiera hecho nada.
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.
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.
