Evite que WYSIWYG + CKEditor elimine las clases html

Estoy usando el editor WYSIWYG con CKEditor. Estoy descubriendo que al agregar clases personalizadas a mis elementos desde la vista de "fuente", CKEditor elimina esas clases al cambiar de la vista de fuente.

Cuando busqué en Google una solución a esto, encontré la página del módulo CKEditor que describe cómo solucionar esto cuando se usa CKEditor solo. (Básicamente, necesitamos configurar una configuración JS config.allowedContent = trueen su configuración de Filtro de contenido avanzado).

Sin embargo, cuando se usa CKEditor a través de WYSIWYG, estas configuraciones no están expuestas en la interfaz de administración. ¿Cómo se logra lo mismo cuando se usa CKEditor a través de WYSIWYG?

PD: No puedo usar CKEditor solo porque no se integra con el complemento de medios .

¿Qué versión de CKEditor estás usando? Hay un problema con CKEditor 4.1+, que tiene una característica llamada Filtro automático de contenido (ACF) que eliminará automáticamente los atributos no definidos para el editor: https://drupal.org/node/1956778

El parche # 37 en el número funcionó para mí.

Encontré una solución.

Esto desactiva el filtrado, está funcionando, pero no es una buena idea ...

config.allowedContent = true;

Para jugar con una cadena de contenido funciona bien para id, etc., pero no para los atributos de clase y estilo, porque tiene () y {} para el filtrado de clase y estilo.

Entonces, mi apuesta es permitir que cualquier clase en el editor sea:

config.extraAllowedContent = '*(*)';

Esto permite cualquier clase y cualquier estilo en línea.

config.extraAllowedContent = '*(*);*{*}';

Para permitir solo class = "asdf1" y class = "asdf2" para cualquier etiqueta:

config.extraAllowedContent = '*(asdf1,asdf2)';

(por lo que debe especificar los nombres de clase)

Para permitir solo class = "asdf" solo para la etiqueta p:

config.extraAllowedContent = 'p(asdf)';

Para permitir el atributo id para cualquier etiqueta:

config.extraAllowedContent = '*[id]';

etcétera etcétera

Para permitir la etiqueta de estilo (<style type = "text / css"> ... </style>):

config.extraAllowedContent = 'style';

Para ser un poco más complejo:

config.extraAllowedContent = 'span;ul;li;table;td;style;*[id];*(*);*{*}';

Espero que sea una mejor solución ...

Esto parece algo que debería agregarse al módulo WYSIWYG, la capacidad de agregar configuraciones personalizadas a los editores es un requisito bastante extendido. Pero en ausencia de eso, todavía recomiendo no editar el módulo en sí, ya que se rompería en las actualizaciones ... afortunadamente, el módulo proporciona una llamada drupal_alter, por lo que en un módulo personalizado:

function mymodule_wysiwyg_editor_settings_alter(&$settings, $context){
    //check if the editor is ckeditor and the version is at least 4.0
    if($context['profile']->editor=='ckeditor' && $context['editor']['installed version'][0]>3){
        //add custom settings for ckeditor 4.+ here
        $settings['allowedContent'] = TRUE;
    }
}

donde "mymodule" es obviamente el nombre de su módulo personalizado. Esto lleva a cabo la tarea sin editar el módulo de otra persona.

Intente agregar lo siguiente a modules / wysiwyg / editors / ckeditor.inc

'allowedContent' => TRUE, a function wysiwyg_ckeditor_settings($editor, $config, $theme)

para que ahora se lea:

function wysiwyg_ckeditor_settings($editor, $config, $theme) {
  $settings = array(
    'width' => 'auto',
    // For better compatibility with smaller textareas.
    'resize_minWidth' => 450,
    'height' => 420,
    // @todo Do not use skins as themes and add separate skin handling.
    'theme' => 'default',
    'skin' => !empty($theme) ? $theme : 'kama',
    // By default, CKEditor converts most characters into HTML entities. Since
    // it does not support a custom definition, but Drupal supports Unicode, we
    // disable at least the additional character sets. CKEditor always converts
    // XML default characters '&', '<', '>'.
    // @todo Check whether completely disabling ProcessHTMLEntities is an option.
    // ADDED  'allowedContent' => TRUE, to keep WYSIWYG from removing classes
    'entities_latin' => FALSE,
    'entities_greek' => FALSE,
    'allowedContent' => TRUE, 
  );

Sin hackear ninguna fuente, y también sin tratar de averiguar DÓNDE se están leyendo estos ajustes, puede agregar esto a su propio módulo personalizado

function mymodule_wysiwyg_editor_settings_alter(&$settings, $context) {
    if ($context['profile']->editor == 'ckeditor') {
        $settings['extraAllowedContent'] = array(
            'a[download,type,length,href]',
            'span;ul;li;table;tr;td;style;*[id];*(*);*{*}'
        );
    }
}

La configuración que solicita el OP *(*);*{*}proviene de la respuesta de @Tommy anterior. Esto parece permitir atributos de clase y estilo en cualquier elemento. El resto son solo entradas de ejemplo. Como otro ejemplo, esta entrada permite las etiquetas que necesita el módulo de medios.

'img[title,alt,src,data-cke-saved-src](wysiwyg-break,drupal-content);video[width,height,controls,src](*);source[src,type];audio[controls,src](*);img[*](media-element,file-default)',

El filtro HTML filtrado elimina las clases de elementos que no están en sus elementos HTML permitidos . La etiqueta de párrafo ( <p>) no está allí por defecto (lo que puede ser confuso y poco natural), aunque puede ser el elemento más frecuente en el que se aplica la clase. Una vez que lo coloque allí, el HTML filtrado ya no eliminará las clases de estas etiquetas. Lo mismo ocurre con las etiquetas de imagen ( <img>).