Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

WYSIHTML5: El Editor WYSIWYG HTML5 que necesitas poner en tu web Hoy

Jesús Lucas
  • Escrito por Jesús Lucas el 07 de Mayo de 2014
  • 5 min de lectura | Frontend
WYSIHTML5: El Editor WYSIWYG HTML5 que necesitas poner en tu web Hoy

Tal y como su nombre indica WYSIHTML5 es un editor WYSIWYG, puedes ver la demo funcional . Un editor WYSIWYG transforma los campos de texto proporcionando opciones de edición de contenido, por ejemplo: alineaciones, estilo del texto, listas, insertar imágenes, enlaces, colorear texto.. entre otras opciones. Este editor ha sido deasrrollado por la empresa Xing y es compatible con todos los navegadores modernos actuales.

En mi opinión, es uno de los mejores editores WYSIWYG , si no el mejor, por su velocidad, sencillez y usabilidad, además de ser totalmente Open Source. Algunas de sus características más clave son:

  • Más rápido que sus competidores: TinyMCE, CKeditor, ALoha, etc.
  • Convierte automáticamente en link cualquier URL que escribas.
  • Genera código HTML5 válido y semántico ( incluso si pegas el contenido desde alguna aplicación ofimática).
  • No usa estilos en línea, usa nombres de clase por lo que la carga de la web es mucho más rápida.
  • Entrada de voz a texto en Chrome.
  • No requiere el uso de librerías adicionales como jQuery.

Instalación de WYSIHTML5

1. Incluimos los Scripts

Descargamos los ficheros javascript desde https://github.com/xing/wysihtml5/zipball/0.3.0 . Los ponemos en un directorio accesible por nuestra aplicación web y los incluimos antes de la etiqueta </body> de nuestro html.
<!-- wysihtml5 parser rules -->
<script src="/ruta-a-wysihtml5/parser_rules/advanced.js"></script>
<!-- Library -->
<script src="/ruta-a-wysihtml5/dist/wysihtml5-0.3.0.min.js"></script>
Si quieres saber que función realizan estos archivos puedes leer la documentación oficial de WYSIHTML5 .

2. Creamos un TextArea

<form>
	<textarea id="wysihtml5-textarea" placeholder="Enter your text ..." autofocus=""></textarea>
</form>
WYSIHTML5 cojera el textarea y lo transformará en un editor de texto enriquecido.

3. Creamos la barra de herramientas.

<div id="wysihtml5-toolbar" style="display: none;">
  <a data-wysihtml5-command="bold">bold</a>
  <a data-wysihtml5-command="italic">italic</a>

  <!-- Some wysihtml5 commands require extra parameters -->
  <a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="red">red</a>
  <a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="green">green</a>
  <a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="blue">blue</a>

  <!-- Some wysihtml5 commands like 'createLink' require extra paramaters specified by the user (eg. href) -->
  <a data-wysihtml5-command="createLink">insert link</a>
  <div data-wysihtml5-dialog="createLink" style="display: none;">
    <label>
      Link:
      <input data-wysihtml5-dialog-field="href" value="http://" class="text">
    </label>
    <a data-wysihtml5-dialog-action="save">OK</a> <a data-wysihtml5-dialog-action="cancel">Cancel</a>
  </div>
La barra de herramientas contiene las opciones para formatear nuestro texto y añadir imágenes, etc. Esta barra de herramientas que acabamos de crear tiene las opciones más básicas, pero WYSIHTML5 soporta muchas otras opciones que puedes ver en la lista de comandos soportados .

4. Inicializamos WYSIHTML5

Antes de cerrar la etiqueta </body> deberemos añadir el código javascript que hará que se inicie el editor:
<script>
var editor = new wysihtml5.Editor("wysihtml5-textarea", { // id of textarea element
  toolbar:      "wysihtml5-toolbar", // id of toolbar element
  parserRules:  wysihtml5ParserRules // defined in parser rules set 
});
</script>

Conclusiones

Como puedes ver la instalación y configuración de este editor Wysiwyg es bastante sencilla , y a pesar de esto su poder es increible . Si necesitas más funcionalidades puedes desarrollarlas tu mismo ya que es 100% Open Source.
En github podrás encontrar numerosos plugins para frameworks que usan Wysihtml5 y otros añadidos que dotarán a Wysihtml5 de otras muchas opciones.

Si te ha gustado este artículo, por favor compártelo en tus redes sociales , y no olvides suscribirte para estar al tanto de nuestras últimas noticias y los contenidos exclusivos para nuestros suscriptores de email.

Estas son algunas de las empresas que ya confían en OpenWebinars

Profesores y profesionales

Nuestros docentes son profesionales que trabajan día a día en la materia que imparten

Conviértete en profesor de OpenWebinars