ACR syntaxe des règles

http://docs.ckeditor.com/#!/guide/dev_allowed_content_rules-section-2 et http://docs.ckeditor.com/#!/guide/dev_acf

CKEditor 4.4 ACF  (Advanced Content Filter) et ACR (Allowed Content Rules) travaillent ensemble.

2 syntaxes différentes. Une compacte et limitée (Format String), l'autre est plus puissante (format Object).

En String, la syntaxe est  elements [attributes]{styles}(classes)

Tous peuvent prendre une *. Ex:

// cette règle accepte les elements <p> et <h1>, mais sans aucune prop
p h1

// Cette règle accepte les éléments <p> et <h1> avec les classes optionnelles "left" et "right". Note: p et h1 garderons ces classes, pas seulement <h1>.
p h1(left,right)

// Cette règle accepte les éléments <p> et <h1> avec tous leurs attributs qui commancent par 'data-'.
p h1[data-*]

// Cette règle accepte <a> seulement si cette balise comporte un "href" car ! rend obligatoire
a[!href]

// Accepting <img> avec "src" requis et 3 options "alt" + les 2 styles "width" et "height".
img[alt,!src]{width,height}

// Idem que ci-dessus, car l'ordre ne compte pas, espaces sont ignorés.
img { height, width } [ !src, alt ]

On sépare une règle de l'autre par des  ;  Attention à l'ordre des règles. Ex de règles qui autorisent:

* elements <p> et <h1> avec style optionnel "text-align"
* <a> avec un attribut href obligatoire
* des <strong> et des <em>
* <p> avec une classe "tip" optionnelle (ainsi un p peut contenir un style "text-align" et une classe "tip" à la fois)
p h1{text-align}; a[!href]; strong em; p(tip)

// Rules allowing:
// * elements <p> et <h1> avec un attribut optionnel  "id" ,
// * <a> avec "href" obligatoire et un "id" optionnel
p h1; a[!href]; *[id]

En format Object,

allowedContent: {
    'p h1': {
        styles: 'text-align'
    },
    a: {
        attributes: '!href'
    },
    'strong em': true,
    p: {
        classes: 'tip'
    }
}

aurait le format string équivalent: allowedContent: 'p h1{text-align}; a[!href]; strong em; p(tip)'

La règle  $<n>

 $<n> ne matche pas d'élément, c'est le nom d'une règle. Par ex:

allowedContent: {
    // These rules will allow <h1> and <h2> elements with all their data-* attributes.
    '$1': {
        elements: { h1: true, h2: true },
        attributes: 'data-*'
    }
}

Propriétés match et propertiesOnly

http://docs.ckeditor.com/#!/guide/dev_allowed_content_rules-section-spec...

logo drush