Crea un Editor HTML Online

  • 19/11/2006
  • 12:15 am
  • unijimpe

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.

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

  • Uncategorized

Total de Comentarios: 31

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

Muchas gracias por tu ayuda, funciona todo perfecto.

ronny
25/03/2007
2:33 pm

Y como hago para poder insertar tablas? :(

victor
28/04/2007
12:38 pm

Muy util muchas gracias

Joaquín
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
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
22/06/2007
3:52 am

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

hermess
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
26/08/2007
4:36 am

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

Antonio
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
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
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
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
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
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
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.

Editor HTML en tu web « Dibuja, comenta y bloguea
30/05/2008
1:33 pm

[...] http://blog.unijimpe.net/crea-un-editor-html-online/ [...]

andres navarro
30/05/2008
1:48 pm

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

jackl007
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
19/07/2008
5:40 pm

es lo mejor los quiero

alejandra
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
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
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
05/11/2008
2:28 pm

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

Miguel Monroy
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
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
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
18/03/2009
4:27 pm

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

Marcos
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
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
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
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

Enviar Comentario

(*)

(*)