TinyMCE Los Plugins

Para ver en Youtube click aquí
Dame like en facebook, click aquí

Plugin de imagenes

  Como vimos en el video, para colocar cualquier plugin escribimos la palabra "plugins", seguido dos puntos ":" y entre comillas el plugin que queramos colocar.

 El plugin "image" sirve para poder colocar imágenes en nuestro editor de texto :

tinyMCE.init({

selector : "#editor",

plugins : "image",

})

Control de la barra de herramientas :

toolbar : "image"

Control de barra de menú :

menubar : "insert"

  Recuerda que el menú insert es común a varios plugins.

  Para ver mas detalladamente como personalizar la interfaz de nuestro editor, haz click aquí para ver el primer video.

Ejemplo completo con la interfaz personalizada :

tinyMCE.init({

selector : "#editor",

plugins : "image",

image_dimensions : false,

image_description : false,

image_advtab : true,

image_list : [

{title : "Calculadora", value : "png/calculator.png" },

{title : "Agenda", value : "png/agenda.png"},

{title : "Calendario", value : "png/calendar.png"}

]

})

Plugin "media"

Ejemplo completo :

tinyMCE.init({

selector : "#editor",

plugins : "media",

media_dimensions : false,

media_alt_source : false,

media_poster : false

})

Controles :

toolbar : "media",

menubar: "edit"

Plugin "searchrecplace"

tinyMCE.init({

selector : "#editor",

plugins : "searchreplace"

})

Controles de barra de herramientas y menú disponibles para TinyMCE

   Para ver el videotutorial de configuración y personalización de tinyMCE, click aquí

(No olvides suscribirte)

Los controles que coloco a continuación estan disponibles para la librería base, hay otros controles que estan disponibles bajo el uso de plugins, estos los veremos más adelante.

Barra de Herramientas

• newdocument: Crea un nuevo documento
• bold : Aplica el estilo de "negrita" al texto en cuestión
• italic: Aplica el estilo de "cursiva" al texto en cuestión
• underline: Aplica el estilo de "subrayado" al texto en cuestión
• strikethrough : Crea una linea que pasa por la mitad del texto, estilo de texto tachado
• alignleft: Alinea el texto a la izquierda
• aligncenter: Centra el texto
• alignright: Alinea el texto a la derecha
• alignjustify: Justifica el texto
• styleselect: Crea una lista tipo "dropdown" con los estilos disponibles para aplicar
• formatselect: Crea una lista tipo "dropdown" con los formatos disponibles para aplicar
• fontselect: Crea una lista tipo "dropdown" con las fuentes disponibles para aplicar
• fontsizeselect: Dropdown para seleccionar el tamaño del texto
• cut: Corta el texto al portapapeles
• copy: Copia el texto al portapapeles
• paste: Pega el texto del portapapeles
• bullist: Crea una lista con estilo similar a esta que estas viendo
• numlist: Lista numérica
• outdent: Cambia nivel de la lista hacia afuera
• indent: Cambia nivel de la lista hacia adentro
• blockquote: Convierte la selección en una cita
• undo: Deshace la última operación
• redo : Rehace la última operación deshecha 
• removeformat: Elimina todo el formato del texto

Controles de Menú

  Aparte de los menús que podemos mostrar, como lo son : "file", "edit", "view", "format", tenemos los siguientes controles:

• newdocument : Crea un nuevo documento
• undo: Deshace la última operación 
• redo : Rehace la última operación deshecha
• visualaid: Activa o desactiva las ayudas visuales
• cut: Corta al portapapeles 
• copy: Copia al portapapeles
• paste: Pega desde el portapapeles
• selectall: Selecciona todo el texto
• bold : Aplica el estilo de "negrita"
• italic: Aplica el estilo de "cursiva"
• underline: Subraya el texto
• strikethrough : Crea una linea que pasa por la mitad del texto, estilo de texto tachado
• removeformat : Elimina todos los formatos
• formats: Muestra una lista de los formatos disponibles