Integrando un editor WYSIWYG con phpBB

PhpBB es un sistema de foros open source muy extendido. He estado trabajando ultimamente en uno y una de las características en las que flaquea es con el editor de bbcode. Para un usuario curtido en foros está bien, pero para mucha gente que solo quiera algo de edición basica, es un poco duro. He usado este editor y le he añadido algunas características , vamos a integrarlo en un foro phpBB con el mínimo impacto.

Usar phpBB como foro tiene muchas ventajas, pero tambien algunas desventajas. Para mi una de las más importantes, aunque entiendo que algunas de sus ventajas tienen que ver con esto precisamente, es lo poco modular que es. Extenderlo supone, la mayoría de las veces, tocar el código del “núcleo” de phpBB, lo que conlleva en principio a problemas con las actualizaciones futuras.

He visto algunos editores avanzados para phpBB almsamim-wysiwyg-phpbb3advanced_bbcode_box_3 , etc, pero buscando una forma de mantener el editor “alejado” del núcleo y mantener el número de MODs al mínimo, he preparado uno simple que es sencillo de integrar directamente en el estilo que tengamos en el foro. Yo estoy usando Lucid Lime como estilo base. El proceso es sencillo.

Descargáis bb_wysiwyg y los descomprimis en la carpeta del estilo en “template”. Deberían quedaros una carpeta wysiwyg y dos archivos “html” wysiwyg_pre.html y wysiwyg_post.html.

Añadir el editor visual, en posting_editor.html buscas:

<div id="message-box">
  <textarea>name="signature" id="signature" style="height: 9em;"<!-- ELSE -->name="message" id="message"<!-- ENDIF --> rows="15" cols="76" tabindex="4" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" onfocus="initInsertions();" class="inputbox">{MESSAGE}{DRAFT_MESSAGE}{SIGNATURE}</textarea>
</div>

Y Añades los archivos que descomprimimos antes:

<div id="message-box">
  <!-- INCLUDE wysiwyg_pre.html -->
  <textarea>name="signature" id="signature" style="height: 9em;"<!-- ELSE -->name="message" id="message"<!-- ENDIF --> rows="15" cols="76" tabindex="4" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" onfocus="initInsertions();" class="inputbox">{MESSAGE}{DRAFT_MESSAGE}{SIGNATURE}</textarea>
  <!-- INCLUDE wysiwyg_post.html -->
</div>

Con esto el editor debería funcionar. Deberíamos añadir los BBCodes que se muestran al principio de nuestro editor.js debajo de la licencia, si queremos usar la funcionalidad de alineado, y youtube. Desde el panel de administración en Mensajes (posts en ingles).

Por defecto se deja el editor normal, y un enlace debajo para cambiarlo. Este guarda la configuración en una cookie para recordarlo.

Aquí podeis ver el antes y el después con el estilo Lucid Lime:

Es fácil de poner y quitar desde el estilo, no modifica en absoluto el comportamiento del phpBB, no es invasivo, por defecto se deja el editor normal y el usuario puede activarlo, y es fácil de cambiar para adaptarlo a las necesidades propias del estilo que usemos. Podemos ajustar los colores y estilos tanto en wysiwyg_pre.html como en editor.css que es la hoja de estilos que cargará el editor visual.

Aqui teneis una demo del editor para probar antes.

Happy coding!

  • http://twitter.com/caraos carlos andres

    Amigo disculpa ya logre instalar este editor gracias a tu posts. si uno quiere que sea este el editor por defecto y no el que viene por defecto , hay algún amanera? es que la verdad he intentado y no lo he conseguido.

    • cartuchogl

      Hola, perdona por no haberte contestado antes, pero hacia unos dias que no pasaba por aqui.
      En wysiwyg_pre.html hay dos lineas tal que:
      if(myCookie&&myCookie==”true”) {

      Si las sustituyes por:
      if(!myCookie||myCookie==”true”) {

      En principio deberías tener el editor activado por defecto.
      No lo he podido probar pero debería funcionar ;)

  • Sauri Vega

    Hola, muy interesante el tema
    Cambia automaticamente en phpbb asi como en la demo? Se pueden añadir mas? Toma los de phpbb?

    Gracias

    • cartuchogl

      Este post es sobre una personalización que hice en su dia para un foro. Creo que preguntas por los bbcodes, y si se ponen automáticamente en las opciones. Si es asi, decirte que no, pero puedes personalizarlo en el archivo wysiwyg_pre.html

  • Remy LeBaut

    Hola, yo eh seguido al pie de la letra el tutorial. pero me tira este error (Parse error: syntax error, unexpected ‘}’ in /home/a1993455/public_html/cache/tpl_prosilver_posting_editor.html.php on line 134). asi que me fui a ver esa linea ( name=”signature” id=”signature” style=”height: 9em;”name=”message” id=”message” rows=”15″ cols=”76″ tabindex=”4″ onselect=”storeCaret(this);” onclick=”storeCaret(this);” onkeyup=”storeCaret(this);” onfocus=”initInsertions();” class=”inputbox”>_rootref['MESSAGE'])) ? $this->_rootref['MESSAGE'] : ”; echo (isset($this->_rootref['DRAFT_MESSAGE'])) ? $this->_rootref['DRAFT_MESSAGE'] : ”; echo (isset($this->_rootref['SIGNATURE'])) ? $this->_rootref['SIGNATURE'] : ”; ?>) pero no veo el error, ademas esto me pasa con cualquier theme. sabrías a que se debe esto?

    • cartuchogl

      ¿Has probado a borrar la cache de phpbb?