Evite que WYSIWYG + CKEditor elimine las clases html

9

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 .

jrharshath
fuente
¿Qué versión de CKEditor descargó en su carpeta de bibliotecas?
Beebee
usando la versión 4.2
jrharshath el

Respuestas:

4

¿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í.

Dave Bruns
fuente
mientras que el parche falló para mí, codifiqué "allowContent = true" en editors/ckeditor.incla wysiwyg_ckeditor_settingsfunción de
jrharshath el
Me alegra que lo hayas hecho funcionar. Ese parche debe aplicarse a la versión -dev de wysiwyg, por lo que podría ser la razón por la que no se aplicó.
Dave Bruns el
Sin embargo, hay mucho más en el parche que esa sola línea. ¡Asegúrese de realizar una prueba completa para que todo funcione en consecuencia!
Beebee
10

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 ...

Tommy en LIW
fuente
1
¿¡¿¡¡¿¡¿DÓNDE?!?!!?!? en que archivo !!! nadie en Internet ha mencionado UNA VEZ que se debe configurar este config.allowedContent?
coderama
@coderama en / admin / config / content / ckeditor, elija su perfil para editar, expanda las Opciones avanzadas y póngalo en la configuración de JavaScript personalizada
UnsettlingTrend
2

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.

Trey
fuente
0

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, 
  );
Todd Austin
fuente
0

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)',
Pico común
fuente
0

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>).

cptstarling
fuente
Pero, cómo poner clase en la opción Permitida de elementos HTML. Hasta donde yo sé, puede poner el elemento HTML en la lista, es decir, <div>, <span> etc. Entonces, según este div y span no se eliminarán, pero ¿cómo poner la clase allí, puede dar un ejemplo?
CodeNext
No hay necesidad de poner una clase allí. Si el elemento HTML está en la lista, su (s) clase (s) permanecerán intactas y no se eliminarán.
cptstarling
No entiendo por qué mi publicación se muestra ayer, lo había preguntado hace varios meses, ¿Hay algún problema ???????
CodeNext
Extraño, porque la respuesta a la que respondiste tiene solo 2 días de antigüedad :)
cptstarling
Ningún hombre, muy extraño, no he hecho nada durante meses en este ... Oh, Dios mío, deja que cierre la sesión y volver a iniciar sesión ....
CodeNext