Impedir que WYSIWYG + CKEditor retire as classes html


9

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ê baixou na sua pasta de bibliotecas?
#Bebee

usando a versão 4.2
jrharshath 30/10

Respostas:


4

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.


enquanto o patch falhou para mim, eu hard-coded "allowedContent = true" em editors/ckeditor.inc's wysiwyg_ckeditor_settingsfunciton
jrharshath

Feliz por você fazer isso funcionar. Esse patch precisa ser aplicado à versão -dev do wysiwyg, e pode ser por isso que não se aplica.
Dave Bruns

Há muito mais no patch do que essa única linha. Teste totalmente para que tudo funcione adequadamente!
Beebee

10

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


1
ONDE?!?!!?!? em qual arquivo !!! ninguém na internet mencionou uma vez onde esse config.allowedContent deve ser definido?
Coderama 31/10

@coderama in / admin / config / content / ckeditor, escolha o seu perfil para editar, expandir as opções avançadas e colocá-lo na configuração personalizada JavaScript
UnsettlingTrend

2

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.


0

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

0

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

0

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


Mas, como colocar a classe na opção Permitida dos elementos HTML. Tanto quanto eu sei, você pode colocar o elemento HTML na lista, por exemplo, <div>, <span> etc. Portanto, de acordo com essa div e span, isso não será eliminado, mas como colocar a classe lá, você pode fornecer um exemplo?
código é o seguinte

Não há necessidade de colocar uma aula lá. Se o elemento HTML estiver na lista, suas classes permanecerão intocadas e não serão removidas.
cptstarling

Não estou entendendo por que minha postagem está sendo exibida ontem, perguntei isso há vários meses: existe algum problema ???????
CodeNext

Estranho, porque a resposta que você respondeu a apenas cerca de 2 dias de idade :)
cptstarling

Nenhum homem, muito estranho, eu não fiz nada por meses a isso ... Oh, meu Deus, deixe-me sair e re-login ....
CodeNext
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.