By David López On junio 25, 2012 · 1 Comment

TinyMCE es un editor de texto WYSIWYG (What You See Is What You Get) para HTML de código abierto que funciona completamente en JavaScript y se distribuye gratuitamente bajo licencia LGPL

Al estar basado en JavaScript, TinyMCE es independiente de la plataforma y se ejecuta en el lado del cliente. Tiene la habilidad de convertir un campo del tipo textarea u otros elementos de html en instancias del editor. Tiene la ventaja de que se puede integrar fácilmente en cualquier CMS, y es altamente personalizable. Ver instalación y configuración en la web de TinyMCE.

Instalación de TinyMCE

En primer lugar, vamos a llevar a cabo la instalación del editor. Para ello, descargamos y extraemos el paquete TinyMCE desde la web oficial de TinyMCE. Seguimos los pasos para su instalación.

En el HTML debe quedar algo así:

<script type="text/javascript" src="./tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode : "textareas"
});
</script>
<form action="action.php" name="f1">
<textarea name="resumen" rows="14" cols="48"></textarea>
</form>

Instalación y configuración del cargador de imágenes

Para la carga de imágenes, vamos a utilizar un plugin para TinyMCE de justboil.me, libre, de código abierto y licenciado bajo Creative Commons Attribution 3.0 Unported.

Las características de este plugin son las siguientes:

Permite a los usuarios subir imágenes en 2 clicks.
Las imágenes se suben en el mismo servidor donde está alojada la web (no hace uso de servicios externos).
Redimensiona de forma automática las imágenes, según el ancho y alto especificado en el fichero de configuración.
Prohibe la carga de imágenes que exceden el tamaño del fichero, el ancho o el alto máximo (especificado en el fichero de configuración).
Permite la subida de imágenes sólo en los formatos que deseemos.

Los requisitos para su puesta en marcha son:

PHP5.
TinyMCE (obviamente). Se recomienda usar versiones posteriores a la 3.4.
GD2 Library (para la manipulación de imágenes).

Para su instalación, seguiremos los siguientes pasos:

Descargar y extraer en la carpeta plugins de TinyMCE. Lo podemos descargar aquí.
Editar el fichero config.php contenido en plugins/jbimages. El fichero está comentado y es muy fácil de ajustar. Tendremos que especificar el directorio destino de la carga (que deberá tener permisos de escritura). Entre otras cosas, podremos ajustar también el ancho y alto permitidos, o la acción a tomar en caso de existir imágenes con un nombre similar a la que se va a cargar (sobreescribir o agregar un número al final del nombre). La ruta al destino debe ser relativa.
Activar el plugin y añadir un botón para la barra de herramientas TinyMCE. Es importante añadir theme:advanced y relative_urls:false.

<script type="text/javascript">
tinyMCE.init({  
theme : "advanced",  
relative_urls : false,  
plugins : "jbimages",  
theme_advanced_buttons1 : "jbimages,|"  
// Other TinyMCE options  
});

Contador de palabras

Como características fundamentales del contador de palabras, destaco las siguientes:

Contador de palabras (no de caracteres). Utiliza expresiones regulares para detectar palabras.
Descendente, empezando a contar hacia atrás desde el número que indiquemos entre etiquetas html span.
Cuando se llega a 0, el cursor se detiene, impidiendo la escritura de más caracteres.
Integración y configuración desde el parámetro setup de la función init de TinyMCE.

Para añadir el contador de palabras, necesitamos la siguiente función en el parámetro setup del init de TinyMCE:

<script type="text/javascript">
	tinyMCE.init({
       		setup: function(ed) {
			var text = '';
			var span = document.getElementById('word-count-' + ed.id);
			if(span) {
			        var wordlimit = span.innerHTML;
       				ed.onKeyDown.add(function(ed, e) {
     					text = ed.getContent().replace(/(< ([^>]+)<)/g, '').replace(/\s+/g, ' ');
       					text = text.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
       					wordcount = wordlimit - (text.split(' ').length);
       					span.innerHTML = wordcount;
       					if(wordcount <= 0 && e.keyCode != 8) {
              					return tinymce.dom.Event.cancel(e);
       					}
      				});
			}
		},
                ...
        });
</script>

Y necesitaremos también el siguiente span en html, con el id “word-count-[nombre del textarea]“:

<span id="word-count-resumen">300</span>

Ejemplo final

<html>
<head>
 
<script type="text/javascript" src="./tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
	tinyMCE.init({
       		mode : "textareas",
	        setup: function(ed) {
			var text = '';
			var span = document.getElementById('word-count-' + ed.id);
			if(span) {
			        var wordlimit = span.innerHTML;
       				ed.onKeyDown.add(function(ed, e) {
     					text = ed.getContent().replace(/(< ([^>]+)<)/g, '').replace(/\s+/g, ' ');
       					text = text.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
       					wordcount = wordlimit - (text.split(' ').length);
       					span.innerHTML = wordcount;
       					if(wordcount <= 0 && e.keyCode != 8) {
              					return tinymce.dom.Event.cancel(e);
       					}
      				});
			}
		},
		theme : "advanced",
		relative_urls : false,
		plugins : "jbimages,fullscreen",
		theme_advanced_buttons1 : "save,bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,fontselect,fontsizeselect",
		theme_advanced_buttons2 : "cut,copy,paste,pastetext,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,cleanup,code,|,forecolor,backcolor",
       		theme_advanced_buttons3 : "hr,removeformat,visualaid,|,sub,sup,|,charmap,|,fullscreen,|,jbimages",
       		theme_advanced_toolbar_location : "top",
       		theme_advanced_toolbar_align : "left",
       		theme_advanced_statusbar_location : "bottom",
       		theme_advanced_resizing : true
		});
 
</script>
<body>
<form name="f1" action="">
<textarea name="resumen" rows="14" cols="48" class="input"></textarea><br />
<p><font style="color:green;">Le quedan <span id="word-count-resumen">300</span> palabras.</font></p>
</form>
</body>
</html>