tinymce 4
Tutoriales y plugins  tinymce

Configuración inicial de tinimce 4

Primeros pasos para configurar adecuadamente tinimce 4. Inicializar tinimce con un textarea o un div editable, seleccionar el editor modo en inline (capa flotante).

Para comenzar primero descarga tinimce desde su sitio web oficial descargar tinymce 4. Una vez copiada la carpeta tinymce dentro del directorio de tu sitio web (te recomiendo que lo incluyas dentro de la carpeta con tus archivos javascript u otras librerías como jquery).  Solo tendrás que incluir la librería en tu página como lo harías con cualquier archivo javascript externo.

<script src="tu_dominio/js/tinymce/tinymce.min.js"></script>
<script>
tinymce.init({ 
        selector: '#mi_text_area' //id del textarea (añadiendo # delante del nombre de id) o nombre del control textarea
 });
</script>
<body>
<textarea id="mi_text_area"></textarea>
</body>


El código completo quedaría como sigue:

<html>
    <head>
        <script src="tu_dominio/js/tinymce/tinymce.min.js"></script>
        <script>
            tinymce.init({ 
                selector: '#mi_text_area' //id del textarea
            });
        </script>
    </head>
    <body>
        <textarea id="mi_text_area"></textarea>
    </body>
</html>


El ejmplo anterior quedaría como la siguiente imágen:



Utilizar un div editable u otro selector

Para utilizar un div en vez de un control textarea tenemos que indicar antes del nombre del id el tipo de selector junto con #. En nuestro caso quedaría div#mi_id. Pero también es posible utlizarlos con otros selectores como un h1. En este caso sería h1#mi_id.

tinymce.init({ 
        selector: 'div#mi_id'
 });


Editor modo Inline

Tinymce además dispone de un modo de editor en linea, es decir que ocupa un bloque único y flota por encima o por debajo de la zona del textarea o del div editable. Como muestra la siguiente imagen.

Importante !
Solo funciona con un elemento que no sea un textarea. Puedes utilizar un div o un h1, h2, etc.



En la imagen puedes observar como el editor se coloca por debajo del textarea. En este ejemplo solo hemos activado el toolbar y hemos ocultado el menu. Es posible añadir más de un toolbar y personalizarlo a nuestro gusto. Para activar el modo inline solo tendremos que indicar el valor inline: true.

El código quedaría de la siguiente forma:
tinymce.init({ 
     selector: 'div#mi_id',
     inline: true
 });

Captura de pantalla del ejemplo anterior: