Filtre tags HTML - Ckeditor

Filtre tags HTML - Ckeditor

15 oct. 2013Drupal 7.x, ckeditor

Les dernières versions de ckeditor intégrent des filtres pour éviter des tags html.

Accèder à la configuration de ckeditor /admin/config/content/ckeditor/edit/Full, section "Options avancées".

Ajouter config.allowedContent = true;

ckeditor.styles.js - Menu Styles dans CKEDITOR - WYSIWYG Drupal

ckeditor.styles.js - Menu Styles dans CKEDITOR - WYSIWYG Drupal

il n'est jamais évidement de trouver comment customiser l'éditeur WYSIWYG dans drupal. 

Voici le fichier que vous devez modifier afin de pouvoir disposer de nouveaux styles dans le menu format de l'éditeur CKEDITOR dans drupal.

Solution

Allez dans le dossier ou vous avez déposé la version de CKeditor, normalement : /sites/all/librairies/ckeditor/plugins/styles/default.js

Vous trouverez une exemple dans le répertoire styles.

Ensuite, vous n'avez plus qu'a créer vos lignes en fonction de vos styles.

Code ckeditor.styles.js Drupal 6


CKEDITOR.stylesSet.add('default',
[{name:'titre H1',element:'span',attributes:{class:'titleH1'}},
{name:'titre H2',element:'span',attributes:{class:'titleH2'}},
{name:'titre H3',element:'span',attributes:{class:'titleH3'}},
{name:'Puce rouge',element:'p',attributes:{class:'puceRouge'}}]);

Code ckeditor.styles.js Drupal 7

Rendez vous sur l'url suivante, /admin/config/content/ckeditor/edit/Full, ceci vous permettra de configurer le "PREDEFINED STYLES PATH" de votre Ckeditor.
Renseignez par exemple: /sites/all/themes/votreTheme/ckeditor.styles.js

Et voici votre fichier ckeditor.styles.js.

 


CKEDITOR.addStylesSet( 'drupal',
[
    /* Block Styles */
    { name : 'Paragraphe' , element : 'p' },
    { name : 'Titre 1' , element : 'h1' },
    { name : 'Titre 2' , element : 'h2' },
    { name : 'Titre 3' , element : 'h3' },

    /* Inline Styles */
    { name : 'Gros' , element : 'big' },
    { name : 'Petit' , element : 'small' }
]);

Vous pouvez bien entendu utiliser la même méthode sous drupal 6, le chemin de configuration de votre ckeditor n'étant pas le même cepedant. Il vous faudra alors ajouter le code plus haut

 

Subscribe to RSS - ckeditor