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

 

• 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 aquí. 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.