21.11.2024

CKEditor e div: Como Prevenir a Remoção de Classes

Resposta Rápida

Para evitar que o CKEditor remova automaticamente classes de <div>, você deve alterar o parâmetro de configuração allowedContent:

CKEditor.replace('editor', {
    allowedContent: 'div(!minhaClasse)' // "minhaClasse" agora é permitida no div
});

Essa configuração permite o uso de tags <div> com a classe .minhaClasse. Se você precisar permitir todas as classes para todas as tags, o valor de allowedContent deve ser definido como true:

CKEditor.replace('editor', {
   allowedContent: true // Todas as classes são permitidas
});

Essas configurações garantem que o CKEditor retenha suas classes, mas tenha cuidado com o comando de permissão global, pois isso pode expor seu site a vulnerabilidades.

Configurações Detalhadas para Retenção de Classes

O CKEditor às vezes remove classes devido à operação do Filtro de Conteúdo Avançado (ACF), que é projetado para garantir a segurança e a correção do conteúdo. Para configurar a retenção de classes necessárias e eliminar as desnecessárias, siga estas recomendações:

Filtragem Fina Usando config.js

Altere o comportamento do CKEditor ajustando o arquivo config.js. Exemplo de configuração:

config.allowedContent = {
    'div': {
        classes: 'minhaClasse' // apenas "minhaClasse" é permitida no div
    }
};

Nota: Substitua 'minhaClasse' pelo nome da classe que você deseja manter, ou use o símbolo '*' para permitir todas as classes.

Permissão Adicional com extraAllowedContent

extraAllowedContent permite que você especifique elementos e atributos adicionais a serem preservados:

config.extraAllowedContent = 'div(minhaClasse)'; // "minhaClasse" é permitida apenas no div

Para permitir todos os estilos, classes e IDs para qualquer elemento, aplique:

config.extraAllowedContent = '*(*);*{*}'; // Tudo é permitido

Usando Configurações Personalizadas para Situações Únicas

Para um controle preciso, utilize configurações personalizadas:

Para permitir IDs em todos os elementos:

config.extraAllowedContent = '*[id]'; // ID é permitido para todos os elementos

Permissões personalizadas para conteúdos específicos:

config.extraAllowedContent = 'p(margin, padding);div(row, column)'; // Permissões especificadas para elementos selecionados

Aspectos de Implementação e Testes

Teste, Verificação e Limpeza de Cache

Realize testes em suas configurações e verifique os resultados após fazer alterações:

1. Limpe o Cache do Navegador: Isso garantirá que todas as alterações sejam efetivas e que o CKEditor não esteja operando com dados armazenados em cache.
2. Verifique Vários Tipos de Conteúdo: Certifique-se de que todas as classes e estilos necessários sejam mantidos.

Recomendações de Segurança

A filtragem de conteúdo é crítica para a segurança. Embora seja conveniente para editar conteúdo, não negligencie as medidas de segurança.

Configurações Específicas para Drupal

Ao utilizar Drupal, preste atenção especial à configuração do CKEditor no contexto dos formatos de texto para evitar problemas relacionados ao comportamento interno do CKEditor.

Visualização

O CKEditor pode ser visualizado como um quebra-cabeça, onde cada peça de conteúdo é uma peça do quebra-cabeça, e os recipientes (<div>) são as caixas para essas peças. As regras de filtragem podem complicar a recriação da imagem completa.

Caixa (📦) 
Peça Rosa (🌹) na Caixa (👷‍♂️🎨) = Conteúdo com as respectivas classes

Após aplicar as regras de filtragem, resulta em:

Antes (🌹📦👷‍♂️🎨): Conteúdo dentro do div com classes.
Depois (🌹📦): Classes são excluídas, apenas o conteúdo permanece.

🌹💈: CKEditor altera as "caixas" removendo classes. Compreender as configurações ajuda a restaurar a imagem completa do quebra-cabeça.

Recursos Úteis

1. Introdução | Documentação do CKEditor 4 - O guia oficial sobre o Filtro de Conteúdo Avançado.
2. Configuração de Classe (CKEDITOR.config) | Documentação da API do CKEditor 4 - Chave para entender como reter classes.
3. Problemas · ckeditor/ckeditor4 — Discussão e soluções para problemas do ACF no GitHub.
4. Seletores de Classe - CSS: Folhas de Estilo em Cascata | MDN - Noções básicas sobre a aplicação de classes do MDN.
5. Tag HTML div - Tudo que você precisa saber sobre a tag <div> e sua gestão.

Video

Navigation