El nuevo editor WYSIWYG de la Coctelera Beta

Continuamos con Beta, hoy con el nuevo editor WYSIWYG en concreto, un editor conocido por todos, en este post voy a describir para que sirve cada botón, quizá muchos ya lo sepáis pero pensar que hay muchos que no.

En primer lugar saber que para aplicar la función de cualquier botón al contenido de nuestro post, primero deberemos seleccionar aquello a lo que le queramos dar formato, tanto si es texto como si es imagen, una vez aplicada una función, el elemento queda desseleccionado, para volver aplicar otro formato al elemento deberíamos seleccionarlo de nuevo.

Dicho esto paso a describir cada botón individualmente.

Negrita

Cursiva

~~Tachado~~

Al clicar en este icono nos sale la siguiente ventana, en ella hemos de poner la URL a donde queramos enlazar, en el ejemplo está la URL de este blog, solo debéis cambiarla por la URL que queráis pero siempre dejando delante http://, que de todos modos ya viene por defecto.

Anula el botón anterior, lo usaremos en caso de habernos equivocado y nuestro deseo sea quitar ese enlace o también lo utilizaremos cuando al escribir una palabra, la cuál contenga el símbolo @, ya que el editor la convierte automáticamente en un enlace.

Cita

Encabezado

en este caso hemos utilizado H3, también nos permite aplicar encabezados H4 y H5.

Lista ordenada

Esta sería la primera opción de lista ordenada
Esta la segunda...
...y así sucesivamente

Lista desordenada

Esta sería la primera opción de lista ordenada
Esta la segunda...
...y así sucesivamente

Deshacer, como dice la misma palabra deshace el último movimiento

Rehacer, todo lo contrario del botón anterior, este rehace el último movimiento

Alinear izquierda

Alinear centro

Alinear derecha

Salto de línea

Aumentar tamaño de fuente

Reducir tamaño de fuente

Al clicar en el siguiente botón, nos sale esta tabla de colores

es aquí, en esta tabla donde seleccionaremos el color deseado para darle formato a nuestro texto al igual que hago yo aquí con el título de mi blog, The Refuseniks

Al clicar en el siguiente botón,nos sale esta ventana par insertar video de Youtube, simplemente hemos de pegar el código del vídeo y clicar en el botón insertar, también hablan de este icono en la Ayuda de la Coctelera, puedes verlo haciendo clic aquí.

Si no tenemos la imagen que vamos a utilizar en nuestro poder pero tenemos la URL de esta utilizaremos el siguiente botón, al clicar en él nos sale la siguiente ventana que será donde substituiremos undefined que viene por defecto, por la URL de la imagen.

Alinear imagen a la izquierda

Para poder alinear la imagen debemos hacer un clic para seleccionarla, nos daremos cuenta que está seleccionada porque se rodea de puntos blancos, una vez está seleccionada volvemos a hacer otro clic en ella, sinó los iconos predeterminados para la alineación de imágenes permanecerán inactivos y no nos permitirán seleccionarlos, de todos modos si ponemos el cursor sobre ellos nos dice que seleccionemos la imagen.

El alinear a la izquierda una imagen, nos da la ventaja de poder escribir todo el texto que queramos por toda la altura de esta, como estáis viendo aquí mismo.

Alinear imagen centro

El alinear al centro una imagen, este es el efecto que tiene, todo el texto que escribamos, se introducirá debajo de la imagen mientras que esta ha quedado centrada encima del texo.

Alinear imagen a la derecha

Este es el efecto que tiene alinear una imagen a la derecha, como podéis comprobar es exactamente lo mismo que alinear a la izquierda pero a la inversa también puedes escribir por toda la altura de la imagen, pero el texto quedará a la izquierda.

Al clicar en el siguiente icono, nos sale la siguiente tabla con emoticonos para que le demos expresiones a nuestros post, simplemente seleccionamos el que queramos y quedará el emoticono seleccionado plasmado en el post.

Borrar formato

Por ejemplo:

Si tenemos esto y aplicamos el icono Borrar formato nos quedamos con esto, esto es útil también para cuando aplicamos un color, sinó borráramos el formato con este icono, seguiríamos escribiendo en el mismo color, de esta manera le borramos el formato cuando nos interese o también si nos hemos equivocado de formato o lo hemos puesto donde no debíamos.

Bueno y hasta aquí la explicación del editor WYSIWYG en modo diseño, osea tal y como lo ves, si quieres ver las imágenes de modo diseño y modo html ampliadas haz clic en ellas.