Un editor de texto HTML es un campo de texto (textarea) que permite a un usuario crear un texto en formato HTML. En páginas webs como blogs, fotos, chats y diarios de visitas son un ejemplo de su uso.
TinyMCE es un editor de texto para HTML de código abierto que funciona en su totalidad con JavaScript y se distribuye bajo la licencia LGPL. Permite, básicamente, convertir un campo tipo "textarea" en un complejo editor HTML para el usuario.
Primero hay que descargarlo de su página oficial
www.tinymce.com/
De preferencia el fichero "development package" que contiene la mayoría de los plugins existentes, lenguajes y demás. Aunque para estos ejemplos estoy usando el paquete básico.
Su forma más simple de uso consiste en agregarlo a nuestra página:
<script type="text/javascript" src="js/tinymce.min.js"></script>
Agregar uno o varios "textareas" a la página:
<textarea id="texto" name="texto" rows="15" cols="80"></textarea>
y, para "convertir" los textareas en editores HTML se agrega otro código de JavaScript a la página:
<script type="text/javascript">
tinyMCE.init(
{
mode: "textareas", //Todos los textareas se verán afectados
theme: "simple" // Es estilo del editor será el más simple
}
);
</script>
Como se lee en el código, se manda a llamar la función
init() con los parámetros
mode de valor "textareas", lo cual indica que se afectarán a todos los campos textareas de la página, y
theme con valor "simple", lo cual indica que se usará el editor sencillo.
El resultado es el siguiente:
Editor simple
Ahora, si lo que quieres es que sólo un campo textarea, o sólo algunos en específico, obtengan la propiedad de ser editores HTML se cambia el valor del parámetro
mode por "exact" y se agrega el parámetro
elements con la lista de los id's de los textareas que queremos convertir en editores de texto; digamos que tenemos los siguientes textareas:
<textarea id="texto1" name="texto1" rows="10" cols="80"></textarea>
<br />
<textarea id="texto2" name="texto2" rows="10" cols="80"></textarea>
<br />
<textarea id="texto3" name="texto3" rows="10" cols="80"></textarea>
y sólo queremos que el textarea "texto1" y "texto3" sean editores HTML, entonces la función init se invoca:
<script type="text/javascript">
tinyMCE.init(
{
mode: "exact", //Indica que sólo algunos textareas tendrán el formato de editor html
elements: "texto1, texto3", //lista de id's de los text áreas que obtendrán el formato de editor
theme: "simple" //El tema será el más simple que hay
}
);
</script>
Y el resultado obtenido es el siguiente:
discriminar textareas
Como se ve, sólo 2 de los 3 textareas son editores HTML, aquellos que indicados en el parámetro
element.
TinyMCE tiene un modo avanzado, el cual incluye bastantes más herramientas y es mucho más personalizable.
Empecemos con lo sencillo, para usar el modo avanzado sólo basta con cambiar el valor del parámetro
theme por "advanced". Una vez hecho esto, se pueden agregar más parámetros a la función
init(), inicialmente lo recomendable es que la barra de herramientas no se encuentre abajo, sino arriba, ya que se incluirán más botones, para ello se agrega el siguiente parámetro:
theme_advanced_toolbar_location: "top", // La barra de herramientas vanzadas la colocamos en la parte superior
También se puede manipular la orientación de los botones (izquierda,derecha o centrados). En fin, el código JavaScript por ahora puede quedar así:
<script type="text/javascript">
tinyMCE.init(
{
mode: "textareas", //Afectará a todas las textareas
theme: "advanced", //El tema será el avanzado
theme_advanced_toolbar_location: "top", // La barra de herramientas vanzadas la colocamos en la parte superior
theme_advanced_toolbar_align: "center", // Indicamos hacia qué lado se alinearán los "botones" de la barra de herramientas (left,right,center)
}
);
</script>
Como mencioné, agregué un quinto argumento para indicar que los botones se centrarán en las barras de herramientas. El resultado es el siguiente:
Editor avanzado
Básicamente así se puede quedar nuestro editor, más sin embargo podemos considerar que son muchas herramientas las que se ven, o son pocas; el modo avanzado es para personalizar el editor. Podemos agregar plugins, los cuales dan funcionalidades extras, podemos cambiar el orden de nuestros botones y agruparlos por "barras de herramientas".
Primero con los plugins, éstos se encuentras almacenados en la subcarpeta "plugins" del archivo que descargamos, también podemos ir descargando nuevos plugins de la misma página (
http://www.tinymce.com/download/plugins.php). Para usarlos primero hay que agregar el parámetro
plugins a la función
init() con una lista de los plugins que queremos agregar.
ejemplo:
plugins: "style,table,save,emotions"
Para administrar los botones por barras de herramientas, agregamos un parámetro por cada barra con el nombre
theme_advanced_buttons# (el # indica el número de la barra, 1, 2, 3...) y de valor la lista de los botones que le queremos agregar, también podemos poner el caracter '|' (barra vertical) para poner un separador en los botones.
Del mismo modo, una vez que se llamaron los plugins en su parámetro, hay que meterlos a una barra para que aparezca su botón de uso, el nombre del botón es el mismo que el nombre del plugin.
Ejemplifico lo anterior con el siguiente ejemplo:
<script type="text/javascript">
tinyMCE.init(
{
mode: "textareas", //Afectará a todas las textareas
theme: "advanced", //El tema será el avanzado
plugins: "style,table,save,emotions", //agregamos algunos de los plugins que vienen en la carpeta plugins, se puedes descargar más de http://www.tinymce.com/download/plugins.php
theme_advanced_toolbar_location: "top", // La barra de herramientas vanzadas la colocamos en la parte superior
theme_advanced_toolbar_align: "center", // Indicamos hacia qué lado se alinearán los "botones" de la barra de herramientas (left,roght,center)
/*Creamos las 3 barras y le agregamos los botones que le queremos dar*/
theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,justyleft,justycenter,justyright,justyfull,formatselect,bullist,numlis,outdent,indent", //formato de letra (negritas,cursiva,subrayada,justificado a la izquierda,centrado,derecha....)
theme_advanced_buttons2: "link,unlink,anchor,image,|,undo,redo,clanup,code,sub,sup,charmp", // herramientas para crear link, deshacer link, anchor, agregar imágen, deshacer,reacer,limpiar...
theme_advanced_buttons3: "style,|,table,|,save,|,emotions",//Aquí le agregamos los botones para que se activen los plugins (Los botones se llaman igual que los plugins :P)
theme_advanced_resizing: true, // Le permite al usuario cambiar el tamaño del textarea
height: "200px", // También podemos determinar la altura de la textarea
width: "600px" //Y lo largo
}
);
</script>
El resultado sería el siguiente:
Editor avanzado personalizado
Se observa que se tienen menos botones que el ejemplo anterior, y agregué la
línea theme_advanced_resizing: true la cual permite que el usuario pueda cambiar el tamaño del textarea.
Una forma casi completa del textárea es con el siguiente código:
<script type="text/javascript">
tinyMCE.init(
{
mode : "textareas",
theme : "advanced",
//Los plugins que trae por defecto
plugins : "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave,visualblocks",
// Agregando las barras de botones
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft,visualblocks",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
}
);
</script>
El resultado es este
Usando la paquetería completa, se puede obtener un editor mucho mejor.
Ejemplo completo de TinyMCE con el tema reciente
En el enlace anterior les aparece el código para obtener un editor HTML completo y usando la explicación de este post pueden depurarlo y hacerlo a su gusto, igual aquí tienen los ejemplos que hice en el blog.
Descarga los ejemplos
NOTA: para un conocimiento aún mayor del TinyMCE, está si
documentación
