Crea un Editor HTML Online

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.

tiny1.gif

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.

  1. <script language="javascript"
  2. type="text/javascript" src="scripts/tiny_mce.js"></script>

El siguiente paso es crear un formulario donde aparecerá nuestro editor, para ello creamos un campo de tipo textarea el cual editor.

  1. <form method="post">
  2. <textarea name="content" cols="60" rows="16">
  3. Texto de prueba en TinyMCE.
  4. </textarea>
  5. </form>

El siguiente paso es asignar que todos los campos textarea puedan mostrar el editor, ello se hace con el siguiente código.

  1. <script language="javascript" type="text/javascript">
  2. tinyMCE.init({
  3.     mode : "textareas"
  4. });
  5. </script>

Finalmente el código completo del HTML con nuestro editor online sería el siguiente.

  1. <title>Editor Online</title>
  2. <script language="javascript" type="text/javascript"
  3. src="scripts/tiny_mce.js"></script>
  4. <script language="javascript" type="text/javascript">
  5. tinyMCE.init({
  6.     mode : "textareas"
  7. });
  8. </script>
  9. </head>
  10. <form method="post">
  11. <textarea name="content" cols="60" rows="16">
  12. Texto de prueba en TinyMCE.
  13. </textarea>
  14. </form>
  15. </body>
  16. </html>

tiny001.jpg

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.

  1. tinyMCE.init({
  2.     mode : "textareas",
  3.     theme : "advanced",
  4.     theme_advanced_buttons1 : "bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,redo,link,unlink",
  5.     theme_advanced_buttons2 : "",
  6.     theme_advanced_buttons3 : "",
  7.     theme_advanced_toolbar_location : "top",
  8.     theme_advanced_toolbar_align : "left",
  9.     theme_advanced_path_location : "bottom",
  10.     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]"
  11. });

tiny002.jpg

Puedes encontrar mas ejemplos en la página oficial o puedes descargar los archivos de ejemplo de este post.

Posts Relacionados

Comentarios Total 41 comentarios


Héctor Valverde
Publicado: 22/01/2007 8:46 pm

Muchas gracias por tu ayuda, funciona todo perfecto.

ronny
Publicado: 25/03/2007 2:33 pm

Y como hago para poder insertar tablas? :(

victor
Publicado: 28/04/2007 12:38 pm

Muy util muchas gracias

Joaquín
Publicado: 25/05/2007 9:08 pm

Buenas a todos, mi pregunta es la siguiente:

Una vez creao un archivo html con el TINYMCE, ¿hay alguna forma de cargarlo con el ese programa?

Si no es así,¿ como es posible cargar y editar un archivo HTML, de forma similar a como se crea con el tinymce.?

Gracias y saludos.

unijimpe
Publicado: 26/05/2007 6:24 am

Una vez que creas un HTML con TinyMCE el siguiente paso es guardar esto en una base de datos, para que luego lo consultes y lo coloques en cualquier parte de tu página.

Elgame
Publicado: 22/06/2007 3:52 am

mychisimas gracias ahora ya puedo colocarlo en mi pagina para que se vea mas presentable

hermess
Publicado: 13/07/2007 12:25 am

Hola! estoy tratando de resolver esto hace mucho, como puedo hacer para guardar el texto en la bd para luego poder mostrarlo en alguna parte de mi web… ayuda porfavor

eduardo
Publicado: 26/08/2007 4:36 am

hola quisiera saber como colocar una forma de enviar comentarios asi de esta manera en codigo html

Antonio
Publicado: 06/09/2007 11:03 pm

Hola,
Perdonar si me equivoco pero esta aplicacion solo sirve para crear nuevos documentos y quisiera modificar documentos txt existentes en mi web, estoy en lo cierto?
Os ruego me ayudeis a saber como se hace o que aplicacion podria ir bien para mi proposito.
gracias de antemano

Raul
Publicado: 08/10/2007 9:37 pm

Hola Antonio, lo podes utilizar tanto para guardar como para recuperar la info, ya que al mostrarla te detcta los tags html y te los muestra correctamente. La duda que tengo es como aplicar esta caracterisca de editor, no a todos los textarea dentro de una misma pagina, sino solo a algunos de eelos, en el caso que tuvieras mas de uno

Wal Duran
Publicado: 19/11/2007 11:42 pm

Oye, pues sí me funcionó, yo lo instalé en una forma para registros que guardo en una base de datos y quedó super chingón. Los puedo capturar y también editar. Y la verdad es que sin tu ayuda no lo hubiera hecho funcionar, está muy bien explicado, ahora sólo me faltan otros botones como agregar http, o videos de youtube, etc. si es con este mismo? será en lo de la configurada? muchísimas gracias.

Jairo
Publicado: 19/12/2007 10:36 am

Hola Quisiera por favor que me explicaras como hago para capturar el contenido de txtarea con su respectivo html para poder guardarlo en una BD.

Por que envio lo que el editor tiene en su textarea y cuando lo capturo con el PHP me recibe el texto de forma plana.

Agradezco tu ayuda.

ismael
Publicado: 21/03/2008 5:12 pm

hola quisiera saber esque yo en mi web queria o quiero colocar registro de usuarios y q al registrarse tubieran su espacio web y que puedan crear editar borrar sus webs pero ahun no se como lo ago para editar x archivo html y q se edite gracias

Guillermo
Publicado: 16/05/2008 10:01 am

hola muy buen post, quisiera saber como anular las fuentes y el tamaño de estas que trae el .doc, para que no me desarmen la web al rescatar de la base de dato y mostrarlo.

desde ya muchas gracias y me disculpo si es una tonteria =P, pero es que o se como se hace.

unijimpe
Publicado: 17/05/2008 10:40 pm

Lo recomendable antes de pegar el contenido en este editor es primero pegarlo a un block de notas y luego recién colocarlo en el editor en donde le daremos el formato deseado, esto se hace para limpiar todos los tags que vienen incluidos previamente.

andres navarro
Publicado: 30/05/2008 1:48 pm

Me gustó tu artículo, voy a ponerlo en práctica.

jackl007
Publicado: 14/07/2008 8:47 am

buen articulo, para empezar a entender como funcionan los editores; aqui les dejo uno terminado, muy profesional:

http://www.prohide.com/Editor

alejandra
Publicado: 19/07/2008 5:40 pm

es lo mejor los quiero

alejandra
Publicado: 19/07/2008 5:58 pm

eh tratado de aser esto y me tomo como muy dificil cual es la seccion de tutoriales como me imprimo el que mas me guste o que me convensa y de que????????así una vez con el tutorial en tus manos y el programa abierto en tu PC comprenderás como funciona y que puedes hace. Comenzar a crear tu Web, o lo que es lo mismo armar tu pagina. Incluir el titulo, la introducción, etc, etc. ayudenme aser esto ayudada

sebas
Publicado: 03/09/2008 4:04 pm

Hola buenas, como puedo Insertar o pasar un texto en un textarea con TinyMCE.

Lo he intentado pero no me da resultado si el tinymce esta.

desde ya muchas gracias, saludos.

ElVagox
Publicado: 22/10/2008 3:45 pm

Hola tengo una duda esuqe en el ejemplo para descargar ni en ninguna parte encuentro de como poder colocar un boton de enviar o submit y no es necesario como le ago para q quede guardado

Juan Caravarril
Publicado: 05/11/2008 2:28 pm

Excelente!!! la verdad que me he quedado impresionado sos un groso!! gracias

Miguel Monroy
Publicado: 25/11/2008 2:45 pm

Muchas gracias, voy a probar lo que has expuesto y lo probaré en el trabajo y en un sistema personal. Ya les estaré comentando

yeffeson
Publicado: 05/02/2009 11:43 am

hola me preguntaba si este editor funciona cuando hago un llamado utilizando AJAX
por lo q c despues de usar AJAX no c puede usar un script puesto q no c recarga la pagina

lo he probado y no me funciona pues uso AJAX como puedo solucionar este problema sin necesidad de omitir mi llamado con AJAX??
gracias

Norant
Publicado: 23/02/2009 3:14 pm

_ Este editor como la mayoria te encapsula el contenido, por ejemplo si quieres hacer una validacion por el lado del cliente, simplemente no la puedes hacer o en su defecto debes de agregarle 2 lineas a tu codigo, ahora si quieres utilizar ajax, no puedes obtener los datos de el por su Id, NO RECOMIENDO ESTE EDITOR, pero gracias a la gente de unijimpe, valen oro.

Roxana Garcia
Publicado: 18/03/2009 4:27 pm

Muchas gracias, me parece un editor super facil de instalar y sencillo…

Marcos
Publicado: 09/05/2009 1:58 pm

He revisado varios editores de este tipo y la razón por la que he hecho eso es por ofrecer a la personas, que haran comentarios, en la web que desarrollo, la oportunidad que puedan algo de formato, y solo algo, a los comentarios que escriben.

El editor que proponen da mas de lo que pido, mi intención no es que puedan crear, las personas, una web o hacer modificaciones html, ajx o algo parecido, solo que den algo de formato, ejempl: negrita, cursiva, subrayado, alineamientos; asi que para eso y mas sirve el editor.

Pero, hay un gran pero pra este editor como para el resto de editores que revise y es que en el ambiente de IE cada vez que una persona digita enter para abrir una nueva linea () lo que obtiene es un nuevo parrafo (), lo cual no es lo que se desea y es una verdadera incomomidad ya que lo que se desea es un simple .

He hallado un editor que si hace lo que comento, ueden revisarlo aqui:
http://developer.yahoo.com/yui/examples/editor/flickr_editor.html

pero este no hace de manera correcta el proceso de deshacer, al parecer no se puede obtener exatamente lo que uno quiere.

Un editor muy simple y que trabaja bien, pero no en lo que comento es el que está en el siguiente enlace:

http://www.htmlarea.com/directory/Detailed/185.html

Espero les sirva lo que comento.

Maria
Publicado: 21/06/2009 3:16 pm

Queria hacerte una consulta, en la pagina oficil de este editor se muestra el ejemplo que tiene el boton de corrector de ortografia pero en los ejemplos no. Y no logro poder insertarlo. como tendria que hacer?
Grx!

Carlos Araujo
Publicado: 22/06/2009 6:57 am

Saludos, deseo saber ¿cómo hago para cargar o visualizar, en tinyMCE, un archivo .html o .php ya existente?
Gracias de antemano.

Karla
Publicado: 26/06/2009 3:58 pm

Hola, queria saber como puedo guradar el contenido del text area en la bd con formato, es decir para mostrarlo en otra pagina con su formato

javiec
Publicado: 20/07/2009 5:08 pm

hola que tal antes que nada felicito al compañero de este blog ya que es un guru.. jeje y muchas gracias por compartir…

quisiera que me imprimiera el contenido del textarea tal como lo hago pero no me sale pongo imagenes y al momento de mostrarlo me aparece solo el texto como le puedo hacer… me refiero algo asi

http://tinymce.moxiecode.com/examples/dump.php

javiec
Publicado: 20/07/2009 5:12 pm

creo que no se vera..
si le dan en submit
http://tinymce.moxiecode.com/examples/full.php
veran que se imprime tal cual pero no me sale alguna sugerencia

de antemano gracias

javiec
Publicado: 21/07/2009 9:40 am

ya lo resolvi por si alguien le interesa y tiene problemas como yo aqui les pongo el codigo.
<?php
$allowedTags='‘;
$allowedTags.=’‘;
if($_POST['elm1']!=”) {
$sHeader = ‘Ah, content is king.’;
echo $sContent = strip_tags(stripslashes($_POST['elm1']),$allowedTags);
//echo $sContent =$_POST['elm1'];
} else {
echo “No existe contenido a imprimir”;
}
?>
salu2

Luis
Publicado: 28/08/2009 1:12 pm

Unijimpe porke cambiaste el diseño de tu web?? estaba mejor que este y mucho mejor mas entendible a la vista!

Carlozzz
Publicado: 07/09/2009 9:43 am

hola quisiera saber porque al crear un link con los editores como este al hacer un submit e imprimirlo en la pagina de destino no funcionan correctamente y sale la direccion algo haci http://localhost/%22http//direccion/%22

ya he probado con unos 6 editores y con todos me pasa lo mismo porfavor necesito salir de este drama

gracias de antemano!

unijimpe
Publicado: 10/09/2009 10:32 pm

Carlozzz, el problema es que no estas ingresando correctamente el URL. tu has ingresado:

http//direccion.com

Cuando en realidad deberías escribir:

http://direccion.com

Es decir te hace falta los dos puntos, es por ello que como no es una dirección correcta el editor trata de formatearlo correctamente. Agrega los dos puntos a tu dirección y verás que funciona correctamente

Luis
Publicado: 13/10/2009 5:12 pm

He realizado todos los pasos, sin embargo cuando lo ejecuto solo me sale el textarea y no se visualiza los controles para la modificacion del texto.
este es el codigo que estoy usando… agradecere sus ayuda.

Editor Online
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]"
});

Texto de prueba en TinyMCE.

Luis
Publicado: 13/10/2009 5:25 pm

Editor Online

tinyMCE.init({
});

Texto de prueba en TinyMCE.

franco
Publicado: 25/11/2009 6:24 pm

qien me podria ayudar poor qe cree un blog y le qiero poner musica:s qien me ayudara?

mi msn es : mssn@live.com.ar ,muchas grasias ;)

César
Publicado: 27/12/2009 12:52 am

Hola, por un buen tiempo e estado visitando tu web esta buena, fijate que implemente esto pero tengo el problema que no me guarda en la base de datos, paso el contenido del textarea por el metodo post a un archivo que hace el ingreso a la base de datos pero simplemente no ingresa nada, imprimi la variable que captura el contenido del textarea y me imprime el texto y creo que tendria q imprimir el html espero me puedas ayudar y una vez mas gracias y felicidades por tu web.

 

Comentar

En este blog los comentarios están moderados, no aparecerán inmediatamente en la página al ser enviados. Por favor, evita los comentarios ofensivos u obscenos por que no serán aprobados.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)