¿Cómo agregar muestras de colores personalizadas a todos los editores WYSIWYG?

Question

¿Cómo agregar muestras de colores personalizadas a todos los editores WYSIWYG?

28 jul 2016, 13:59:09

Vistas: 20.5K

Votos: 11

Me gustaría poder agregar los mismos colores personalizados a las muestras en la parte inferior de los paneles del selector de color que aparecen en los editores WYSIWYG de todo el sitio, para facilitar a los clientes mantener la consistencia en su estilo.

Las muestras a las que me refiero son las de la fila inferior en la captura de pantalla.

Me gustaría hacer esto sin instalar un plugin, idealmente.

Selector de colores

Clayton Jones

274

wysiwyg selector-de-color

Todas las respuestas a la pregunta

Comentarios

Soy consciente de esto, pero esto no actualiza la paleta de colores entre los editores WYSIWYG en todo el sitio como se solicitó. Para mí ahora ni siquiera lo está haciendo dentro de una sola publicación después de actualizar.

Clayton Jones

28 jul 2016 14:45:07

¿Quieres mantener también el color por defecto? ¿O solo los personalizados (es decir, los permitidos)?

Max Yudin

28 jul 2016 15:20:48

Me gustaría poder especificar una selección de colores que llenen las paletas personalizadas en cada editor WYSIWYG en todo el sitio.

Clayton Jones

28 jul 2016 15:32:02

Se agregó la mejor respuesta.

Max Yudin

28 jul 2016 16:17:14

Además de la respuesta de Max, si estás buscando añadir a la paleta existente, aquí está la paleta de colores predeterminada:

$custom_colours = '[
      "000000", "Negro",
      "993300", "Naranja quemado",
      "333300", "Oliva oscuro",
      "003300", "Verde oscuro",
      "003366", "Azul oscuro",
      "000080", "Azul marino",
      "333399", "Índigo",
      "333333", "Gris muy oscuro",
      "800000", "Granate",
      "FF6600", "Naranja",
      "808000", "Oliva",
      "008000", "Verde",
      "008080", "Verde azulado",
      "0000FF", "Azul",
      "666699", "Azul grisáceo",
      "808080", "Gris",
      "FF0000", "Rojo",
      "FF9900", "Ámbar",
      "99CC00", "Verde amarillento",
      "339966", "Verde mar",
      "33CCCC", "Turquesa",
      "3366FF", "Azul real",
      "800080", "Púrpura",
      "999999", "Gris medio",
      "FF00FF", "Magenta",
      "FFCC00", "Oro",
      "FFFF00", "Amarillo",
      "00FF00", "Lima",
      "00FFFF", "Aqua",
      "00CCFF", "Azul cielo",
      "993366", "Violeta rojizo",
      "FFFFFF", "Blanco",
      "FF99CC", "Rosa",
      "FFCC99", "Melocotón",
      "FFFF99", "Amarillo claro",
      "CCFFCC", "Verde pálido",
      "CCFFFF", "Cian pálido",
      "99CCFF", "Azul cielo claro",
      "CC99FF", "Ciruela",
      ... PERSONALIZADO AQUÍ ...
    ]';

JDandChips

210

1 oct 2019 14:20:10

Max Yudin 6.38K · Accepted Answer · 2016-07-28T14:26:57Z

Haz clic en el texto Personalizar... y aparecerá el selector de colores. Elige el color de tu preferencia y presiona Aceptar. El color seleccionado aparecerá como una muestra personalizada para su uso posterior.

¡Nota! La solución anterior no es una solución. Consulta los comentarios y edita a continuación.

Edición:

Aquí hay una función que reemplaza toda la paleta predeterminada con muestras personalizadas.

Nota, hay 7 colores en la lista en lugar de 8. Esto se debe a que también debe estar la X de multiplicación (✕) al final de la lista de colores, que elimina cualquier color aplicado al texto. Por lo tanto, al agregar una fila más, debería haber 15 colores, no 16.

function my_mce4_options($init) {

    $custom_colours = '
        "3366FF", "Nombre del color 1",
        "CCFFCC", "Nombre del color 2",
        "FFFF00", "Nombre del color 3",
        "99CC00", "Nombre del color 4",
        "FF0000", "Nombre del color 5",
        "FF99CC", "Nombre del color 6",
        "CCFFFF", "Nombre del color 7"
    ';

    // construir la cuadrícula de colores predeterminados + colores personalizados
    $init['textcolor_map'] = '['.$custom_colours.']';

    // cambiar el número de filas en la cuadrícula si el número de colores cambia
    // 8 muestras por fila
    $init['textcolor_rows'] = 1;

    return $init;
}
add_filter('tiny_mce_before_init', 'my_mce4_options');

También, puedes construir tu propia cuadrícula de muestras dependiendo del número de colores y los requisitos de la interfaz de usuario:

$init['textcolor_rows'] = 4;
$init['textcolor_cols'] = 2;

Basado en gran medida en esta respuesta de WPSE.

Para más información y personalización, consulta esta publicación de blog.