Impedir que WYSIWYG + CKEditor retire as classes html

Estou usando o editor WYSIWYG com o CKEditor. Estou descobrindo que, ao adicionar classes personalizadas aos meus elementos da exibição "origem", o CKEditor retira essas classes ao sair da exibição de origem.

Ao pesquisar no Google por uma solução para isso, encontrei a página do módulo CKEditor, que descreve como corrigir isso ao usar o CKEditor sozinho. (Basicamente, precisamos definir uma configuração JS config.allowedContent = truenas configurações do Filtro de Conteúdo Avançado).

No entanto, ao usar o CKEditor via WYSIWYG, essas configurações não são expostas na interface do administrador. Como você consegue o mesmo ao usar o CKEditor via WYSIWYG?

PS: Não consigo usar o CKEditor sozinho porque ele não se integra ao plug-in de mídia .

Qual versão do CKEditor você está usando? Há um problema no CKEditor 4.1+, que possui um recurso chamado Filtro Automático de Conteúdo (ACF) que remove automaticamente atributos não definidos para o editor: https://drupal.org/node/1956778

O patch 37 da edição funcionou para mim.

Eu encontrei uma solução.

Isso desativa a filtragem, está funcionando, mas não é uma boa ideia ...

config.allowedContent = true;

Jogar com uma sequência de conteúdo funciona bem para id, etc, mas não para os atributos de classe e estilo, porque você tem () e {} para filtragem de classe e estilo.

Então, minha aposta é permitir que qualquer classe no editor seja:

config.extraAllowedContent = '*(*)';

Isso permite qualquer classe e qualquer estilo embutido.

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

Para permitir apenas class = "asdf1" e class = "asdf2" para qualquer tag:

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

(então você deve especificar os nomes das classes)

Para permitir apenas class = "asdf" apenas para a tag p:

config.extraAllowedContent = 'p(asdf)';

Para permitir o atributo id para qualquer tag:

config.extraAllowedContent = '*[id]';

etc etc

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

config.extraAllowedContent = 'style';

Para ser um pouco mais complexo:

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

Espero que seja uma solução melhor ...

Parece algo que deve ser adicionado ao módulo WYSIWYG; a capacidade de adicionar configurações personalizadas aos editores é um requisito bastante difundido. Mas, na ausência disso, eu ainda recomendo não editar o módulo em si, pois ele quebraria nas atualizações ... felizmente, o módulo fornece uma chamada para drupal_alter, portanto, em um 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;
    }
}

onde "mymodule" é obviamente o nome do seu módulo personalizado. Isso realiza a tarefa sem editar o módulo de alguém.

Tente adicionar o seguinte a modules / wysiwyg / editors / ckeditor.inc

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

para que agora leia:

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

Sem hackear nenhuma fonte e também sem tentar descobrir ONDE o sinal sonoro dessas configurações está sendo lido, você pode adicioná-lo ao seu próprio 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];*(*);*{*}'
        );
    }
}

As configurações solicitadas pelo OP são *(*);*{*}da resposta de @Tommy acima. Isso parece permitir atributos de classe e estilo em qualquer elemento. O resto são apenas exemplos de entradas. Como outro exemplo, esta entrada permite as tags necessárias pelo módulo de mídia.

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

O filtro HTML filtrado retira as classes dos elementos que não estão em seus elementos HTML permitidos . A tag de parágrafo ( <p>) não está lá por padrão (que pode ser confusa e não natural), mesmo que seja o elemento mais frequente no qual a classe é aplicada. Depois de colocá-lo lá, o HTML filtrado não removerá mais as classes dessas tags. O mesmo vale para tags de imagem ( <img>).