provides - Limitar las opciones en inserciones de imagen en Drupal TinyMCE

drupal 8 wysiwyg

Question

Estoy usando Drupal 7 con TinyMCE a través del módulo Wysywig.

He habilitado la opción Insertar imagen, pero cuando aparece el cuadro de diálogo Insertar imagen, el usuario muestra una serie de opciones para la imagen que no serían deseables. Además, no hay opción de agregar una clase CSS a la imagen. ¿Existe alguna manera de poder cambiar fácilmente este diálogo para eliminar opciones como dimensiones, alineación, borde, etc. y agregar una opción de clase?

Answer 1

Para aplicar clases de CSS a las imágenes: normalmente, hay una opción en la pestaña "Apariencia" para agregar una clase de CSS a la imagen mediante un menú desplegable de clases disponibles. Si no hay pestañas en el cuadro emergente (parece que no), vaya a la sección "Botones y complementos" de la configuración de su perfil WYSWIWYG (en Configuración> Autoría de contenido) y marque la "Imagen avanzada" caja.

Esto por defecto da una larga lista loca de cada clase en su tema. Para cambiar esto a algo más útil, vaya a la sección CSS y cambie el menú desplegable "Editor CSS". Esto se usa para las clases de imagen en la configuración de Imagen Avanzada, así como en otras listas de clases. Probablemente desee establecerlo en " Definir CSS " y cree un archivo CSS con una selección limitada de clases, luego señale esto en la ruta CSS.

Para podar la interfaz de usuario para obtener un rango de opciones más limitado y fácil de usar: no conozco ninguna forma de hacerlo a través de la configuración. Sin embargo, hay dos métodos de fuerza bruta:

1. Ocultarlos con CSS ( display: none; ) Esto es lo que uso. Es un poco más difícil de lo que debería ser porque el marcado HTML es espantoso, todas las tablas sin clases o identificadores en lugares útiles, pero es razonablemente sencillo si utiliza cosas como reglas n-ésimo y cuenta cuántos elementos <tr> hay hasta que llegue a la (s) que desea eliminar (esto supone que sus usuarios no administrarán contenido utilizando IE 8 o menos, o FF3 - si es posible, escriben algo de jQuery).
2. Hackear el código TinyMCE. No he intentado esto. Investigue los archivos HTML en sites/all/libraries/tinymce/jscripts/tiny_mce/themes/advanced . Jugar con esto no parece agradable, probablemente sea muy fácil romper la interactividad.

Esto es lo que uso para obtener una interfaz agradable, simple y de una pestaña que no tiene más que URL de imagen, texto alternativo, texto de mouseover, vista previa, dimensiones y un menú desplegable de clases de CSS. Tengo el siguiente código CSS agregado al final de los sites/all/libraries/tinymce/jscripts/tiny_mce/themes/advanced/skins/default/dialog.css . Desactiva las funciones que no quiero, elimina las pestañas y las aprieta ordenadamente en el tamaño de la ventana emergente:

#appearance_panel.panel { display: block; }
.tabs { display: none; }
#appearance_panel tr:nth-child(1), #appearance_panel tr:nth-child(3), #appearance_panel tr:nth-child(4), #appearance_panel tr:nth-child(5), #appearance_panel tr:nth-child(6)#appearance_panel tr:nth-child(4), #appearance_panel tr:nth-child(5), #appearance_panel tr:nth-child(6), #appearance_panel tr:nth-child(8) { display: none; }
.panel_wrapper #general_panel { height: 270px; }
.panel_wrapper { padding: 3px 10px 3px;}
body { margin: 0; }