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.

JavaScript:
  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.

HTML:
  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.

JavaScript:
  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.

HTML:
  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.

JavaScript:
  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

Total de Comentarios: 21

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.

Enviar Comentario

(*)

(*)