TinyMCE es una solución completa para crear Editores de Texto para tus formularios HTML, todo con código sencillo y compatible con la mayoría de navegadores.
En un post anterior hablamos de los diferentes editores web online que hay en el mercado y entre ellos hablamos de TinyMCE y esta vez explicaremos como integrar este editor con tu formulario html.
El primer paso es descargar los archivos fuentes con la librería TinyMCE 2.0.8, luego de extraer los archivos copia el contenido de la carpeta /tinymce/jscripts/tiny_mce al directorio donde se encuentran los archivos js de tu proyecto por ejemplo scripts.
Luego creamos un nuevo archivo html donde estará nuestro editor e incluimos una referencia a la librería recién descargada.
El siguiente paso es crear un formulario donde aparecerá nuestro editor, para ello creamos un campo de tipo textarea el cual editor.
<form method="post"> <textarea name="content" cols="60" rows="16"> Texto de prueba en TinyMCE. </textarea> </form>
El siguiente paso es asignar que todos los campos textarea puedan mostrar el editor, ello se hace con el siguiente código.
Finalmente el código completo del HTML con nuestro editor online sería el siguiente.
<html>
<head>
<title>Editor Online</title>
<script language="javascript" type="text/javascript"
src="scripts/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas"
});
</script>
</head>
<body>
<form method="post">
<textarea name="content" cols="60" rows="16">
Texto de prueba en TinyMCE.
</textarea>
</form>
</body>
</html>
TinyMCE te permitirá personalizar completamente el editor recién creado con multiples opciones que estan muy bien documentadas, por ejemplo si deseamos colocar solo los botones que necesitamos el código siguiente nos puede ayudar.
tinyMCE.init({
mode : "textareas",
theme : "advanced",
theme_advanced_buttons1 : "bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,redo,link,unlink",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_path_location : "bottom",
extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]"
});
Puedes encontrar mas ejemplos en la página oficial o puedes descargar los archivos de ejemplo de este post.
Comentarios Total 55 comentarios
Publicado: 10/11/2011 2:26 pm
HOLA ME GUSTARIA SABER COMO HACER ESTE EDITOR, PERO QUE SOLO ESTE DISPONIBLE PARA INSETAR EL CODIGO CSS, QUE EL HTML SEA EL MISMO !!! COMO HAGO ???
Me entienden…
En una ventana, solo poner el codigo css y darle el diseño automaticamente, pero que el usuario no vea el html.. no interte el css y vea los cambios.. EMMANUELRM@LIVE.COM
Publicado: 12/12/2011 4:10 pm
Yo uso tinyMCE con Ajax y si hay un metodo en que pasar la id cuando9 envias datos, sin funciones adicionales. Uno es la función en Ajax en si cuyos parámetros de entrada sean el script que procesara los datos y el id del usuario. Y esa función se llamaría en la propiedad action del formulario.
Con tiempo puedo decir como se hace. Por ahora estoy algo corto de tiempo.
Publicado: 11/01/2012 5:52 pm
Hola – Utilice el editor, pero cuál es el archivo para colocar los botones que aparecen en el textarea, me gustaria saber cuál es.
En tu editor tienes todos los botones en el mio salen unos pocos, donde se ubica el archivo para colocar los otros.
Publicado: 17/02/2012 3:23 pm
En mi pagina tengo 4 textareas y solo se muestra el editor para los 2 primeros me podrian decir cual es el problema y como puedo lograr que se muesrtre el editor para mis 4 textareas
Publicado: 24/02/2014 1:19 am
Trate LiveGap Editor (http://editor.livegap.com/?lan=es)
Libre Editor HTML en l?nea con resaltado de sintaxis, vista previa en vivo, plegado de c?digo, modo de pantalla completa, los temas, las etiquetas a juego, autocompletado, b?squeda de la etiqueta, el marco y los soportes de cierre