wysihtml5, interesante editor HTML5 dependiente

wysihtml5, interesante editor HTML5 dependiente: Ya conocemos perfectamente los editor WYSIWYG que nos permiten escribir código HTML más cómodamente y sobretodo podemos verlo en tiempo real, lo que produjo en su momento que tuvieran una gran acojida para diferentes aplicaciones.

En la era HTML5, WYSIHTML5 nos permite hacer exactamente lo mismo, pero en lenguaje HTML5, no es que nos devuelva HTML5 sinó que gracias a elementos HTML5 hacemos que este script permita ofrecer funcionalidades más fácilmente.

Veamos un ejemplo:

Cargamos el JS y las reglas de configuración:


<script src="/path-to-wysihtml5/parser_rules/advanced.js"></script>
<script src="/path-to-wysihtml5/dist/wysihtml5_0.3.0.min.js"></script>

Ver reglas disponibles por defecto o un ejemplo del advanced.js.

Creamos un contenedor

El contenedor deberá ser un textarea si queremos que el contenido sea usado para guardarlo, procesarlo o lo que se crea conveniente.


<form><textarea id="wysihtml5-textarea" placeholder="Enter your text ..." autofocus></textarea></form>

Creamos una toolbar con las opciones

Aquí es donde está lo interesante, ya que la toolbar no se autogenera gracias al Javascript sinó que es el javascript que en función de los elementos que se encuentra añade unas funcionalidades u otras.


<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>
</div>

Indicamos que elemento será el contenedor, que elemento hará de toolbar y que reglas se han de usar para mapear funcionalides contra elementos.


<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>

Compatibilidad

Como era de esperar

Firefox 3.5+
Chrome
IE 8+
Safari 4+
Safari on iOS 5+
Opera 11+

Me gusta, sobretodo por la forma en la que está programado, haciendo que el Javascript sea HTML dependiente y no viceversa.

Noticies XGavalda

Cercar en aquest blog