5

Estou utilizando o CKEditor para criar páginas que podem conter formulários (em outras palavras, formulários podem ser inseridos no conteúdo sendo editado, pois estou usando o full package). Gostaria de poder utilizar o atributo required em alguns campos dos formulários sendo editados (ele é suportado pela maioria dos browsers modernos, e no meu caso uma solução via JavaScript seria no mínimo inconveniente1), só que o CKEditor não só não oferece essa opção como também - ao tentar editar o fonte diretamente - remove esse atributo se eu tentar colocá-lo "à força".

Pra piorar a situação, o CKEditor não permite que se adicione classes aos inputs, também removendo-as caso eu as coloque direto no fonte (tem algum jeito de desabilitar isso?). Só me resta fazer gambiarras ainda maiores pra chegar onde eu quero (viável, contudo; não precisa sugerir isso em resposta, pois já tenho alguns meios em mente).

Há algum meio de "forçar" o CKEditor a aceitar esse atributo? Nem que pra isso eu tenha que desabilitar outras validações que essa ferramenta faz? Ou isso é algo específico do contentEditable, e cada browser vai fazer do seu jeito sem possibilidade de customização?

1. Esclarecendo: não é problema pra mim colocar um JavaScript "genérico" que atue igualmente em qualquer página criada, o inconveniente é ter que criar um código JS específico pra cada formulário que for criado (pois isso é uma funcionalidade a ser oferecida para o cliente!).

5
  • Pelo que vi nos códigos referentes parece proposital para forçar a usar o sistema de validação deles, talvez só um hack/patch no código principal.
    – Syzoth
    Commented 10/04/2015 às 17:13
  • O required estaria no próprio campo editável? Achei um bug report falando disso, mas consta como resolvido.
    – bfavaretto
    Commented 10/04/2015 às 18:46
  • @bfavaretto Pelo que eu entendi, esse bug report se refere ao textarea que é convertido em um editor via $("#textarea").ckeditor(...), e não ao conteúdo do mesmo sendo editado pelo usuário. No conteúdo (modo full) pode-se incluir várias coisas, inclusive outros formulários, e é nos campos desses formulários que eu preciso eventualmente colocar o atributo required.
    – mgibsonbr
    Commented 10/04/2015 às 19:07
  • A propósito, o CKEditor foi concebido pensando no HTML4, de modo que sua validação rejeita muita coisa considerada válida pelo HTML5. Eu tenho pouca esperança desse tipo de suporte ser oferecido num futuro próximo, mas eu espero conseguir um meio de desabilitar algumas validações de modo a conseguir inserir o que eu quero (e de preferência preservar, entre uma edição e outra). Minhas pesquisas até agora levaram pro protectedSource, talvez por aí exista uma solução, em breve devo fazer uns testes...
    – mgibsonbr
    Commented 10/04/2015 às 19:10
  • Sim, o bug é no textarea a ser convertido. Não estava claro pra mim se você estava falando desse campo ou do próprio conteúdo do editor, agora entendi que é o segundo caso.
    – bfavaretto
    Commented 10/04/2015 às 19:29

2 Respostas 2

4

A configuração extraAllowedContent permite ampliar os filtros1 que determinam o que é ou não aceito no markup tratado pelo CKEditor. Para se permitir o atributo required em inputs e textareas, por exemplo, pode-se usar essa configuração:

CKEDITOR.config.extraAllowedContent = 'input[required];' + 
                                      'textarea[required];';

No caso usei uma configuração global, mas poderia também fazê-lo em um editor específico.

1. Esses filtros são os mesmos citados por Michel Simões em sua resposta (que me indicou na direção correta para chegar a esta solução).

4
  • Como posso implementar o required neste codigo? <textarea required id='editor33' name='descricao' rows="5" style='width:600px;height:700px;' ></textarea> <script> CKEDITOR.replace( 'editor33' ); </script>
    – saimita
    Commented 24/05/2016 às 10:54
  • @saimita Não entendi o que quis dizer. Isso tem alguma coisa a ver com essa resposta? Se não, sugiro abrir uma nova pergunta, descrevendo sua dúvida com mais detalhes.
    – mgibsonbr
    Commented 24/05/2016 às 11:10
  • tenho uma textarea ckeditor e cria que fosse required
    – saimita
    Commented 24/05/2016 às 11:22
  • @saimita Ah, entendi. Realmente, isso não tem nada a ver com essa pergunta - pois ela se trata de colocar o atributo required no conteúdo de um editor. Para fazer o editor em si ser required, eu não sei como é... :(
    – mgibsonbr
    Commented 24/05/2016 às 11:26
3

Voce pode usar a propriedade filter.check para verificar se há algum texto, por exemplo para verificar se há imagem no texto: filter.check( 'img[alt]' ); // -> true ou se vc quiser pode usar filter.check( '', true, true ); // -> true que ele retornará false se o campo estiver em branco.

3
  • Não entendi como isso resolve meu problema. Esse filtro poderia ser aplicado individualmente a cada campo? Pelo próprio editor (ou de uma maneira que ele fosse preservado entre edições)? Essa parte é importante... Pois como expliquei na pergunta, não dá pra colocar código JS específico pra cada formulário, apenas um código genérico que atue igualmente em todo formulário criado.
    – mgibsonbr
    Commented 15/04/2015 às 18:18
  • se voce configurar nas properties genéricas do ckeditor, la na classe construtora dele, todas as instancias receberão o filtro antes de submeter o formulário será verificado. se vc atribuir no construtor do ckeditor na tela, poderá atribuir manualmente para cada um. Commented 15/04/2015 às 18:34
  • Valeu, sua resposta me deu a dica que eu precisava pra resolver (no fim usei extraAllowedContent em vez de filtros)! No começo eu tinha entendido que era algo a ser aplicado nos inputs - e não no editor como um todo...
    – mgibsonbr
    Commented 15/04/2015 às 18:51

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .