Recordad que para pedir soporte alguno, debéis facilitar los datos de soporte oportunos por favor, mirad aquí y leer las Normas generales del foro, esto nos servirá de ayuda para dar el mejor soporte..

Gracias.

La Administración de phpBB España.

Hagamos un editor WYSIWYG

Foro destinado a los MODs en desarrollo para phpBB 2 por favor.
  Reglas del Foro
Antes de participar en los foros, leer esto por favor.
Normas generales de phpBB-Es y las de Soporte
Cerrado

0
No hay votos
 
Votos totales: 0

Avatar de Usuario
digital
Observador/a
Mensajes: 47
Registrado: 25 Jul 2009, 17:47
Nombre real: Parmenides de elea

Hagamos un editor WYSIWYG

#1

Mensaje por digital » 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.

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>&nbsp;");
        rep(/\[quote=\"(.*?)\"\](.*?)\[\/quote\]/gi,"<span class=\"quoteStyle user_$1\">$2</span>&nbsp;");
        rep(/\[quote.*?\](.*?)\[\/quote\]/gi,"<span class=\"quoteStyle\">$
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.

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, "");
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.


URL: www.emudigital.net/forum.html
Versión phpBB: phpBB3 (3.0.6)
MODs Instalados: HotEditor 4.2
Seo Ultimate Premod 3.0.6
Gym and Sitemaps para phpbb 3.0.6
Cloneposts
Medal System Mod 0.10.2
Simple Comment 1.6.2
ViewPost
Advanced Paypal MOD
Logout Animation

Plantilla(s) usada(s): AeroBlue 3.0.6
Servidor: Linux, Pago. Bluehost.
Actualización desde otra versión: No
Conversión desde otro sistema de foros: No


Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje

MR.PABLO
Ex Staff
Mensajes: 530
Registrado: 30 Jul 2009, 17:34
Nombre real: Juan Pablo
Ubicación: Chile
Edad: 32
Contactar:

Re: Hagamos un editor WYSIWYG

#2

Mensaje por MR.PABLO » 05 Dic 2009, 19:20

Me parece muy buena idea! :cerveza:
Antes de nada, lee las Normas de phpBB-Es, y la siempre útil Guí a de phpBB en Castellano.
Consulta la Documentación de phpBB 2, la Documentación de phpBB 3 y los FAQS de ayuda para tus problemas.
Quizás esté resuelto, y todos ahorremos tiempo.
Si es sobre cómo Crear una Consulta SQL ya lo tienes explicado en el enlace.
En general, se pide Buscar antes de preguntar para no repetir preguntas y dudas resueltas.
Sólo tendrás Soporte si facilitas los datos correspondientes y si respetas completamente el Copyright de phpBB.
NOTA: No damos Soporte a los foros integrados en Nuke y derivados del mismo. Infórmate AQUÍ.


[hr]
Spoiler
Mostrar
Versión phpBB: phpBB3 (3.0.6)
MODs Instalados: PhpBB3 Portal 1.2.2 Highslide Attachment Mod 4.1.4 Activity Stats Mod Simple Hide BBcode Portal Phpbb Arreglos Varios a Portal, cambios, etc Similar Topic`s Mod Tabs al estilo prosilver No Avatar Barra lateral de Mitch Seo URl v. 6.2 META Etiquetas por .:: MSSTI ::.BBcode con imágenes Open Links In New Tab MSSTI RSS Feed 2.0 with ACP Email Masivo Prime Links [Con modificación de Mitch incluída]Page Title Number MODQuién editó el post?
Evil Quick Reply 1.0.1
Plantilla(s) usada(s): 1blackout - [Basada en Prosilver]
Servidor:Linux. Page
Actualización desde otra versión: SI . 3.0.5
Conversión desde otro sistema de foros: No
Usuario de prueba : usuario_prueba
Pass: 123456[/align][/size][/font]
[hr]
אָ MяРαвlΘ אָ @ Webmaster de JjTeamWebdesign


Imagen


Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje

Avatar de Usuario
digital
Observador/a
Mensajes: 47
Registrado: 25 Jul 2009, 17:47
Nombre real: Parmenides de elea

Re: Hagamos un editor WYSIWYG

#3

Mensaje por digital » 05 Dic 2009, 22:44

He conseguido un pequeño avance. Añadir que el editor reconozca el comando de centrar el texto:
En la parte de de BBcode a HTML

Código: Seleccionar todo

rep(/\[center\]/gi,'<center>');
rep(/\[\/center\]/gi,'</center>');
Ahora la parte de HTML a BBcode no logro hacerla. Si consiguiera hacer el código completo, ya tendría el resto de los alineamientos de texto, justificar, derecha e izquierda. Saludos
URL: www.emudigital.net/forum.html
Versión phpBB: phpBB3 (3.0.6)
MODs Instalados: HotEditor 4.2
Seo Ultimate Premod 3.0.6
Gym and Sitemaps para phpbb 3.0.6
Cloneposts
Medal System Mod 0.10.2
Simple Comment 1.6.2
ViewPost
Advanced Paypal MOD
Logout Animation

Plantilla(s) usada(s): AeroBlue 3.0.6
Servidor: Linux, Pago. Bluehost.
Actualización desde otra versión: No
Conversión desde otro sistema de foros: No


Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje

Avatar de Usuario
ahh72
Ex Staff
Mensajes: 3837
Registrado: 29 Dic 2008, 17:28
Nombre real: @l€x
Ubicación: In der Nähe von Frankfurt, Deutschland
Género:
Edad: 47
Contactar:

Re: Hagamos un editor WYSIWYG

#4

Mensaje por ahh72 » 09 Dic 2009, 12:53

me parece excelente tu idea pero de codigo yo no se nada :ops

saludos
Datos de Soporte:
- URL del Foro: http://www.peruvoley.com/foro
- Hosting donde está alojada: http://www.rogohosting.com
- Versión del foro: 3.1.9
- Estilo: prosilver
- Mods Instalados:

Guias de ayuda:
Guia para corregir el copyright en foros phpBB3



Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje

Avatar de Usuario
Alorse
Ex Staff
Mensajes: 5144
Registrado: 22 Mar 2008, 02:14
Nombre real: Alfredo
Ubicación: Colombia
Género:
Edad: 32
Contactar:

Re: Hagamos un editor WYSIWYG

#5

Mensaje por Alorse » 19 Dic 2009, 18:03

El editor en si no es complicado, porque se trata de expreciones regulares, y javascript... lo maluco es adaptarlo al panel del ACP... ya que este tipo de MOD tiene demaciadas funcionalidades, yo te puedo colaborar en todo lo relacionado con la programación de este... y el adpatarlo al phpBB3, si quieres sigue con tu proyecto y realiza el editor medienta textareas o cosas así que solo sea manejo de html y JS, y luego ya vemos como ir adaptarlo a phpBB3... es es el rollo :P

Un saludo y genial idea... que bien que mas gente de habla hisapana se atreviera a empezar a desarrollar MODs...


Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje

Avatar de Usuario
jorup16
Miembro
Mensajes: 440
Registrado: 21 Abr 2007, 03:10
Nombre real: Jorge
Ubicación: Zacapa, Guatemala
Edad: 33
Contactar:

Re: Hagamos un editor WYSIWYG

#6

Mensaje por jorup16 » 31 Dic 2009, 22:23

Excelente idea, este mod si que valdrá la pena. :ok:
URL: http://www.fifa-xgamers.com
Versión phpBB: phpBB 3.2.0
EXts Instaladas:
Spoiler
Mostrar
Advanced BBCode Box 3.1.4
Ajax Base 2.0.0
BBbreadcrumbs 1.0.1
BBembed 1.1.0
BBrandom 1.0.3
Categorize Announcements and Stickies 1.0.0
cBB Chat 1.1.3
Database Optimize & Repair Tool 1.1.2
External Links Open in New Window 1.0.6
Fancy Lazy Topics loader 2.1.14
FLATBOOTS Mini CMS 1.0.7
Forumhulp Helper 3.1.10
SiteSplat BBCore 3.2.4
Upload Extensions 3.1.4
User Merge 1.0.2
Plantilla(s) usada(s): Flatboots 3.2
Servidor: Linux (Namecheap.com) de pago
Actualización desde otra versión: 3.1.x a 3.2.x
Conversión desde otro sistema de foros: Ninguna


Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje

Avatar de Usuario
leviatan21
Ex Staff
Mensajes: 8279
Registrado: 26 Mar 2008, 20:06
Nombre real: Gabriel
Ubicación: Argentina
Género:
Edad: 49

Re: Hagamos un editor WYSIWYG

#7

Mensaje por leviatan21 » 30 Abr 2010, 03:15

Hola gente :

Recién descubro este tema y quería comunicarles que yo he hecho algunas cosas con respecto a un editor tipo WYSIWYG, pero sobre mi MOD ABBC3.

Al parecer este tema quedó en el olvido, no se si debería escribir :?:

Por mucho tiempo he tenido en mi foro un tema abierto para ver si alguien quiere ayudarme, ya que yo solo resulta difícil.

Si alguien está interesado, en empezar o continuar avisen :chulo:
Normas de phpBB España | Normas de Soporte
No doy soporte por privado : tenga en cuenta que su problema, también puede ser el problema de otro usuario.
Cualquier mensaje privado no solicitado será ignorado :twisted:

"Education is what remains after one has forgotten everything he learned in school" - Albert Einstein


Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje

Cerrado

Volver a “Desarrollo de MODs phpBB 2”