CKEDITOR bande de façon inattendue mon tag personnalisé dans les tables HTML

Question

Pour un client, nous avons dû développer un plugin permettant à l'utilisateur de sélectionner une référence de contenu depuis Drupal. Cette référence est insérée en tant que jeton dans un champ WYSIWYG. Afin d'être clairement identifiable dans le contenu textuel riche, nous avons implémenté une balise personnalisée comme suit "<customtag token="...">label</customtag>" qui affiche le jeton comme une boîte en surbrillance.

Nous utilisons CKEditor 4.4.8.

La balise personnalisée est affichée correctement lorsqu'il est utilisé directement dans une balise « P »:

<p><customtag token="...">label</customtag></p> 

Mais quand on l'insère dans le tableau HTML, il est dépouillé par CKEditor.

nous obtenons que:

<table> 
    <tr> 
    <td>label</td> 
    </tr>  
</table> 

Au lieu de:

<table> 
    <tr> 
    <td><customtag token="...">label</customtag></td> 
    </tr>  
</table> 

Nous déclarons la customtag comme suit:

CKEDITOR.dtd['customtag'] = CKEDITOR.dtd; 
CKEDITOR.dtd.$blockLimit['customtag'] = true; 
CKEDITOR.dtd.$inline['customtag'] = true; 
CKEDITOR.dtd.$nonEditable['customtag'] = true; 
if (parseFloat(CKEDITOR.version) >= 4.1) { 
    // Register allowed tag for advanced filtering. 
    editor.filter.allow('customtag[!*]', 'customtag', true); 
    CKEDITOR.dtd.$object['customtag'] = true; 
} 

J'ai essayé CKEDITOR.config.extraAllowedContent = 'customtag[*]'; au lieu de editor.filter.allow('customtag[!*]', 'customtag', true); et de jouer avec les permettre des règles mais sans succès. Qu'est-ce que nous manquons pour le tag personnalisé est accepté dans la table aussi?

Answer 1

Enfin, j'ai compris ce qu'il manquait.

Dans la définition DTD, je n'ai pas défini dans quelles balises HTML la balise personnalisée peut être incluse. Apparemment, lorsque la balise personnalisée est déclarée comme "inline", CKEDITOR configure elle-même la plupart des balises HTML de bloc comme "p" ou "div" mais pas pour des balises comme "td" ou "li" .

je devais le faire dans mon code comme suit:

CKEDITOR.dtd [ 'td'] [ 'customtag'] = 1; CKEDITOR.dtd ['li'] ['customtag'] = 1; Après, ma balise a été correctement prise en compte.

A la fin, mon code ressemble à ceci:

CKEDITOR.dtd['customtag'] = CKEDITOR.dtd; 
    CKEDITOR.dtd.$blockLimit['customtag'] = 1; 
    CKEDITOR.dtd.$inline['customtag'] = 1; 
    CKEDITOR.dtd.$nonEditable['customtag'] = 1; 

    CKEDITOR.dtd['td']['customtag'] = 1; 
    CKEDITOR.dtd['li']['customtag'] = 1; 

    if (parseFloat(CKEDITOR.version) >= 4.1) { 
     // Register allowed tag for advanced filtering. 
     editor.filter.allow('customtag[!*]', 'customtag', true); 
     CKEDITOR.dtd.$object['customtag'] = 1; 
    } 

Comme vous pouvez le remarquer, j'ai aussi changé les valeurs booléennes par les nombres entiers. Je l'ai fait juste pour aligner les paramètres effectués à travers mon code sur ce que fait CKEditor pour les autres balises HTML.