Como su nombre lo indica WYSIHTML5 es un editor WYSIWYG, es decir, transforma campos de texto proporcionando las opciones más comunes, por ejemplo: estilos de texto (negrita, cursiva), listas, encabezados, insertar imágenes o enlaces y colorear el texto.

Entre sus principales características tenemos:

• Es más rápido y ligero que otros conocidos editores como TinyMCE, Aloha, etc.
• Convierte automáticamente en link cualquier URL que se teclee
• Genera código HTML5 válido y semántico (incluso cuando el contenido se pega desde MS Word).
• Utiliza nombres de clase en lugar de estilos en línea
• No requiere frameworks JavaScript como jQuery o similares.

Configuración

1. Incluímos los ficheros JS:

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

2. Creamos el campo de texto que usaremos como editor:

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

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

4. Antes de la etiqueta </body>, añadimos el script que iniciará 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>

WYSIHTML5 es compatible con los siguientes navegadores:

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

Enlace: WYSIHTML5