Estou usando o CKEditor como editor de back-end no meu site. Isso está me levando à curva, já que parece querer mudar o código para a forma que achar melhor sempre que pressiono o botão de fonte. Por exemplo, se eu clicar no código-fonte e criar um <div>...

<div class="myclass">some content</div>

Então, sem motivo aparente, retira a classe do <div>, então quando eu clico no código novamente, ele foi alterado para ...

<div>some content</div>

Eu presumo que esse comportamento irritante pode ser desativado no config.js, mas eu tenho cavado e não consigo encontrar nada na documentação para desativá-lo.

Desativando a filtragem de conteúdo

A solução mais fácil é ir para o config.js e a configuração:

config.allowedContent = true;

( Lembre-se de limpar o cache do navegador ). Então o CKEditor para de filtrar o conteúdo inserido. No entanto, isso desativará totalmente a filtragem de conteúdo, que é um dos recursos mais importantes do CKEditor.

Configurando a filtragem de conteúdo

Você também pode configurar o filtro de conteúdo do CKEditor com mais precisão para permitir apenas esses elementos, classes, estilos e atributos necessários. Essa solução é muito melhor, porque o CKEditor ainda remove muitos códigos ruins que os navegadores produzem ao copiar e colar conteúdo, mas não tira o conteúdo desejado.

Por exemplo, você pode estender a configuração padrão do CKEditor para aceitar todas as classes div:

config.extraAllowedContent = 'div(*)';

Ou algumas coisas do Bootstrap:

config.extraAllowedContent = 'div(col-md-*,container-fluid,row)';

Ou você pode permitir listas de descrição com diratributos opcionais para dte ddelementos:

config.extraAllowedContent = 'dl; dt dd[dir]';

Estes foram apenas exemplos muito básicos. Você pode escrever todo tipo de regras - exigindo atributos, classes ou estilos, combinando apenas elementos especiais, combinando todos os elementos. Você também pode proibir coisas e redefinir totalmente as regras do CKEditor. Leia mais sobre:

• Filtragem de conteúdo no CKEditor - por que você precisa de um filtro de conteúdo.
• Filtro de Conteúdo Avançado - com uma descrição detalhada do mecanismo de filtragem.
• Regras de conteúdo permitido - como escrever regras de conteúdo permitido.

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.

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

Edit : esta resposta é para quem usa o módulo ckeditor no drupal.

Encontrei uma solução que não requer modificação do arquivo ckeditor js.

esta resposta é copiada daqui . todos os créditos devem ir para o autor original.

Vá para "Admin >> Configuração >> CKEditor"; em Perfis, escolha seu perfil (por exemplo, Completo).

Edite esse perfil e, em "Opções avançadas >> Configuração JavaScript personalizada", adicione config.allowedContent = true;.

Não se esqueça de liberar o cache em "guia Desempenho".

Desde o CKEditor v4.1, você pode fazer isso no config.js do CKEditor:

CKEDITOR.editorConfig = function( config ) {
  config.extraAllowedContent = '*[id](*)';  // remove '[id]', if you don't want IDs for HTML tags
}

Você pode consultar a documentação oficial para obter a sintaxe detalhada das Regras de conteúdo permitido

se você estiver usando o ckeditor 4.x, tente

config.allowedContent = true;

Se você estiver usando o ckeditor 3.x, pode estar tendo esse problema .

tente colocar a seguinte linha em config.js

config.ignoreEmptyParagraph = false;

Isso é chamado ACF (Filtro Automático de Conteúdo) no ckeditor. Ele remove todas as tags não desejadas. O que estamos usando no conteúdo de texto.

config.allowedContent = true;

Consulte o guia oficial do Filtro de conteúdo avançado e o tutorial de integração de plugins .

Você encontrará muito mais do que isso sobre esse recurso poderoso. Consulte também config.extraAllowedContent que parece adequado para suas necessidades.

Se você usar o Drupal AND o módulo chamado "WYSIWYG" com a biblioteca CKEditor, a seguinte solução alternativa poderá ser uma solução. Para mim, funciona como um encanto. Eu uso o CKEditor 4.4.5 e o WYSIWYG 2.2 no Drupal 7.33. Encontrei esta solução alternativa aqui: https://www.drupal.org/node/1956778 .

Aqui está: eu crio um módulo personalizado e coloco o seguinte código no arquivo ".module":

<?php
/**
 * Implements hook_wysiwyg_editor_settings_alter().
 */
function MYMODULE_wysiwyg_editor_settings_alter(&$settings, $context) {
  if ($context['profile']->editor == 'ckeditor') {
    $settings['allowedContent'] = TRUE;
  }
}
?>

Espero que isso ajude outros usuários do Drupal.

A seguir, é apresentado o exemplo completo do CKEDITOR 4.x :

HTML

<textarea name="post_content" id="post_content" class="form-control"></textarea>

ROTEIRO

CKEDITOR.replace('post_content', {
   allowedContent:true,
});

O código acima permitirá todas as tags no editor.

Para mais detalhes: Regras de conteúdo permitido pelo editor CK

Eu descobri que a mudança para usar html completo em vez de html filtrado (abaixo do editor na caixa suspensa Formato de texto) é o que corrigiu esse problema para mim. Caso contrário, o estilo desapareceria.

Eu gostaria de adicionar este config.allowedContent = true; precisa ser adicionado ao arquivo ckeditor.config.js, não o config.js, config.js não fez nada por mim, mas adicioná-lo à área superior do ckeditor.config.js manteve minhas classes div

Outra opção, se estiver usando o drupal, é simplesmente adicionar o estilo css que você deseja usar. dessa forma, não retira o estilo ou o nome da classe.

Portanto, no meu caso, na guia css do drupal 7, basta adicionar algo como

facebook = span.icon-facebook2

verifique também se o botão estilos de fonte está ativado

Enfrento o mesmo problema no chrome com o ckeditor 4.7.1. Apenas desative o pasteFilter no ckeditor instanceReady. Essa propriedade desabilita todas as opções de filtro do Advanced Advance Content Filter (ACF).

 CKEDITOR.on('instanceReady', function (ev) {
        ev.editor.pasteFilter.disabled = true;
    });