Impedisci a WYSIWYG + CKEditor di rimuovere le classi html

Sto usando l'editor WYSIWYG con CKEditor. Sto scoprendo che quando si aggiungono classi personalizzate ai miei elementi dalla vista "sorgente", CKEditor rimuove tali classi quando si esce dalla vista sorgente.

Quando ho cercato su Google una soluzione, ho trovato la pagina del modulo CKEditor che descrive come risolvere questo problema quando si utilizza CKEditor da solo. (Fondamentalmente, dobbiamo configurare una configurazione JS config.allowedContent = truenelle sue impostazioni di Filtro contenuto avanzato).

Tuttavia, quando si utilizza CKEditor tramite WYSIWYG, queste impostazioni non sono esposte nell'interfaccia di amministrazione. Come si ottiene lo stesso quando si utilizza CKEditor tramite WYSIWYG?

PS: Non posso usare CKEditor da solo perché non si integra con il plug-in multimediale .

Quale versione di CKEditor stai usando? Si è verificato un problema con CKEditor 4.1+, che ha una funzione chiamata Filtro contenuto automatico (ACF) che rimuoverà automaticamente gli attributi non definiti per l'editor: https://drupal.org/node/1956778

La patch n. 37 nel numero ha funzionato per me.

Ho trovato una soluzione

Questo disattiva il filtro, funziona, ma non è una buona idea ...

config.allowedContent = true;

Giocare con una stringa di contenuto funziona bene per id, ecc., Ma non per gli attributi di classe e stile, perché hai () e {} per il filtro di classe e stile.

Quindi la mia scommessa per consentire qualsiasi classe nell'editor è:

config.extraAllowedContent = '*(*)';

Ciò consente qualsiasi classe e qualsiasi stile in linea.

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

Per consentire solo class = "asdf1" e class = "asdf2" per qualsiasi tag:

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

(quindi devi specificare i nomi delle classi)

Per consentire solo class = "asdf" solo per il tag p:

config.extraAllowedContent = 'p(asdf)';

Per consentire l'attributo id per qualsiasi tag:

config.extraAllowedContent = '*[id]';

ecc ecc

Per consentire il tag di stile (<style type = "text / css"> ... </style>):

config.extraAllowedContent = 'style';

Per essere un po 'più complesso:

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

Spero sia una soluzione migliore ...

Questo sembra qualcosa che dovrebbe essere aggiunto nel modulo WYSIWYG, la possibilità di aggiungere impostazioni personalizzate agli editor è un requisito piuttosto diffuso. Ma in mancanza di ciò, consiglio comunque di non modificare il modulo stesso poiché si romperà sugli aggiornamenti ... per fortuna il modulo fornisce una chiamata a drupal_alter, quindi in un modulo personalizzato:

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;
    }
}

dove "mymodule" è ovviamente il nome del tuo modulo personalizzato. Questo compie il compito senza modificare il modulo di qualcun altro.

Prova ad aggiungere quanto segue a modules / wysiwyg / editors / ckeditor.inc

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

in modo che ora legga:

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, 
  );

Senza hackerare alcuna fonte, e anche senza cercare di capire DOVE vengono lette queste impostazioni, puoi aggiungere questo al tuo modulo personalizzato

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];*(*);*{*}'
        );
    }
}

Le impostazioni richieste dall'OP provengono *(*);*{*}dalla risposta di @Tommy sopra. Questo sembra consentire attributi di classe e stile su qualsiasi elemento. Il resto sono solo voci di esempio. Come altro esempio, questa voce consente i tag necessari al modulo multimediale.

'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)',

Il filtro HTML filtrato rimuove le classi dagli elementi che non si trovano nei suoi elementi HTML consentiti . Il tag di paragrafo ( <p>) non è presente per impostazione predefinita (che può essere confuso e innaturale), sebbene possa essere l'elemento più frequente su cui viene applicata la classe. Una volta inserito, l'HTML filtrato non eliminerà più le classi da questi tag. Lo stesso vale per i tag immagine ( <img>).