CKEditor : conf ACF, ACR et Disallowed Content

Advanced Content Filter (ACF) a été introduit dans CKEditor 4.1. Depuis CKEditor 4.4 Allowed Content Rules (ACR) est le complémentaire de Disallowed Content (blacklister des tags).

Présentation ACF

ACF a 2 modes : automatique  et custom (via allowedContent). Dans ces 2 modes on peux étendre la conf du filtre avec extraAllowedContent (ACR) ou disallowedContent.

ACF est fortement lié à la conf de l'éditeur enlightened. Lors de l'ini de l'éditeur, les fonctionnalités de l'éditeur ajoutent leurs règles au filtre.
- Si dans la barre d'outils on active un plugin, ACF le prendra (ex: pas le liste "font" dans la barre d'outils -> ACF retire les <font>).
- Par ex, les présets de la lib "basic" et "full" ont des fonctionnalités différentes (boutons de barre outils, raccourcis claviers, styles...) => coller le meme contenu dans des instances différentes (de l'éditeur) n'aura pas la meme mise en forme (puisque CKEditor le modifie selon la conf - voir cette démo).

Quelques ex simples

Conf ckeditor: barre d'outil minime, sans controle de couleur de police ni bouton souligné.
Avec config.extraAllowedContent = 'u;span{color}' le souligné ne saute plus, ni les couleurs de police. Mais les fonts et autres balisent sautent : voir l'ex http://sdk.ckeditor.com/samples/acf.html

Ex extraAllowedContent

http://stackoverflow.com/questions/15753956/ckeditor-strips-inline-attri...

Permettre les classes (class="asdf1" et class="asdf2") pour n'importe quel tag: config.extraAllowedContent = '*(asdf1,asdf2)';
Permettre la classe "asdf" sur p seul: config.extraAllowedContent = 'p(asdf)';

Ex d'un ACF custom

Source: http://sdk.ckeditor.com/samples/acfcustom.html

Tout ce qui n'est pas dans config.allowedContent sera retiré (ex: background-color sur <td>).

a[!href]; autorise les liens (lien obligatoire car ! ).
img(left,right)[!src,alt,width,height] l'URL des images est obligatoire (!src), attributs autorisés: alt, width, height et class (mais seulement les valeurs class="left" ou class="right")
span{!font-family}, span{!color}, span(!marker) Les seules balises span autorisées sont celles qui apportent une font, couleur ou marker.

sur le web

http://docs.ckeditor.com/#!/guide/dev_allowed_content_rules et disallowed_content

http://stackoverflow.com/questions/15659390/ckeditor-automatically-strips-classes-from-div/15659962#15659962

http://stackoverflow.com/questions/15753956/ckeditor-strips-inline-attri...

logo drush