WebEstudio :: Blog de Diseño Web » GUÍAS http://www.jorgebravo.es Profesionales más creativos XHTML + CSS + PHP + Flash Sat, 06 Aug 2011 11:16:29 +0000 en hourly 1 http://wordpress.org/?v=3.1.1 Guía: instertar un editor WYSIWYG con TinyMCE http://www.jorgebravo.es/2010/04/guia-instertar-un-editor-wysiwyg-con-tinymce/ http://www.jorgebravo.es/2010/04/guia-instertar-un-editor-wysiwyg-con-tinymce/#comments Wed, 28 Apr 2010 08:00:37 +0000 Jorge Bravo http://www.jorgebravo.es/?p=414

cab-post-tiny

TinyMCE es un editor HTML On-Line que es capaz de convertir los textarea de un formulario en campos WYSIWYG traspasando todo el trabajo a HTML automáticamente.

Características

  • Es sencillo de integrar en las páginas web, ya que solo tiene dos líneas de código.
  • Se puede personalizar a través de temas y plugins.
  • También se pueden instalar paquetes de idiomas.
  • Es compatible con la mayoría de los navegadores como Firefox, Internet Explorer, Opera y Safari, aunque este último esta en fase experimental.
  • Con el compresor GZip para PHP/.NET/JSP/Coldfusion, hace que TinyMCE sea un 75% más pequeño y mucho más rápido de cargar.
  • Se puede utilizar AJAX para guardar y cargar el contenido.


Integración de TinyMCE

Para poder utilizar TinyMCE es las páginas web, el navegador tiene que ser compatible y tener Javascript habilitado.

Primero hay de descargar TinyMCE desde la siguiente página de descargas: http://tinymce.moxiecode.com/download.php. Después hay que descomprimirlo y guardarlo en el servidor de la página web para poder utilizarlo en los textarea de los formularios.

En la página que se vaya a utilizar, primero hay que incluir la librería tiny_mce.js incluyendo el archivo externo de código Javascript.

1
<script language="javascript" type="text/javascript" src="/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>

A continuación hay que inicializar TinyMCE para convertir los textarea en campos de texto WYSIWYG editables.

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

</script>

Ejemplo de integración de TinyMCE

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <title>Ejemplo TinyMCE</title>
   <script language="javascript" type="text/javascript" src="/tinymce/jscripts/tiny_mce/tiny_mce.js"> </script>
   <script language="javascript" type="text/javascript">
      tinyMCE.init({
         mode : "textareas",
         theme : "advanced"
      });
   </script>
</head>

<body>
   <form method="post" name="tinymce">
      <textarea name="texto" cols="50" rows="15"></textarea>
   </form>
</body>
</html>

En este ejemplo primero hemos incluido la librería tiny_mce.js dentro de las etiquetas . También dentro de estas etiquetas también hemos inicializado TinyMCE para que en el textarea del formulario se convierta en un campo de texto WYSIWYG.

Via: Desarrolloweb.com

]]> http://www.jorgebravo.es/2010/04/guia-instertar-un-editor-wysiwyg-con-tinymce/feed/ 2 10 plugins jQuery Muy útil para desarrolladores Web http://www.jorgebravo.es/2009/10/10-plugins-jquery-muy-util-para-desarrolladores-web/ http://www.jorgebravo.es/2009/10/10-plugins-jquery-muy-util-para-desarrolladores-web/#comments Wed, 14 Oct 2009 12:27:28 +0000 Jorge Bravo http://www.jorgebravo.es/?p=313

jquery-plugs

jQuery como plataforma de desarrollo es grande y vemos el resultado de esto cada día. Casi es difícil de creer pero cada vez que decido buscar un nuevo plugin jQuery para resolver una tarea concreta en mi trabajo me doy cuenta de que la comunidad proporciona constantemente nuevas soluciones de alta calidad de forma gratuita.

El número de contribuciones es muy alto y a mi como desarrollador esto me hace volver cada vez a por más. Supongo que a muchos desarrolladores les ocurrirá algo similar. A veces no somos conscientes del trabajo que todo esto implica y las horas de duro trabajo que conlleva. Muchas gracias a todos por gastar su precioso tiempo en la creación de cosas que todos podemos utilizar.  A continuación una lista de 10 plugins de gran ayuda, que te puedes encontrar actualmente.

Form extensions
jQuery Form extensions es un pequeño plugin para ayudar en forma rapida en las tareas relacionadas con jQuery. Realmente simple, pero para muy útil para cualquier desarrollador, es muy bueno tener a mano para llevar a cabo tareas, especialmente si ya están encapsulados como este.

formex

SimplePager – jQuery paging plugin
La premisa detrás de SimplePager es permitir la creación de la paginación o la configuración con el menor esfuerzo posible. Este plugin localiza los divs, párrafos, elementos de la lista o casi cualquier otro contenido. Simple pero muy poderoso!
pager

El articulo original se encuentra en Ingles pero para el caso de este tipo de plugins, las guías son muy sencillas de seguir. En todo caso si hay alguno que os interese y necesitan alguna ayuda, postearla aquí en los comentarios para ver si les puedo ayudar de alguna manera.

Via: www.tripwiremagazine.com (Ingles)

]]> http://www.jorgebravo.es/2009/10/10-plugins-jquery-muy-util-para-desarrolladores-web/feed/ 2