Galactic Civilizations 3
CKEditor - Liste des styles

CKEditor - Liste des styles

Catégorie: Javascript.
Posté par le 06/10/2011.
Dernière mise à jour le 03/05/2012.

<<Tutoriel précédent 

Description

Ce tutoriel vous expliquera comment personnaliser la liste des styles de l’éditeur de texte CKEditor.

Introduction

Ce tutoriel peut être réalisé à l'aide d'un simple éditeur de texte. Il nécessite des connaissances de base en HTML. Ce tutoriel nécessite également que CKEditor soit installé correctement.

Nous allons considérer que le fichier contenant l'éditeur de texte (index.HTML) se trouve à la racine, que les fichiers de configurations de CKEditor se trouvent dans /CKEditor/ckeditor et que les modules se trouvent dans /CKEditor/modules.

Modification de la liste des styles

Nous allons maintenant personnaliser la liste des styles de notre éditeur de texte.

CKEditor liste des styles par défaut

Tout d’abord, modifions le fichier /CKEditor/modules/CKEDITOR_config.js afin de retirer les styles par défaut :

CKEDITOR_config.js

...
contentsCss: 'style.css',
stylesSet: [ ]
});

Ensuite, nous allons écrire le plugin permettant la personnalisation de notre liste de styles. Pour ce faire, créer le répertoire /CKEditor/ckeditor/plugins/MesStyles. Dans ce répertoire créé le fichier plugin.js.

plugin.js

(
function(){
// Permet de récupérer la liste des styles personnalisés.
function verif(c,mauvais,bon){
  var f=c.join(' ');
  f=f.replace(/(,|>|\+|~)/g,' ');
  f=f.replace(/\[[^\]]*/g,'');
  f=f.replace(/#[^\s]*/g,'');
  f=f.replace(/\:{1,2}[^\s]*/g,'');
  f=f.replace(/\s+/g,' ');
  var g=f.split(' '),h=[];
  for(var i=0;i<g.length;i++){
    var j=g[i];
    if(bon.test(j)&&!mauvais.test(j) && CKEDITOR.tools.indexOf(h,j)==-1)
      // On met le style dans la liste des styles
      h.push(j);
  }
  return h;
};

// Permet d'ajouter les styles personnalisés à la liste.
function ajout(c,mauvais,bon){
  var f=[],g=[],h;
  for(h=0;h<c.styleSheets.length;h++){
    var i=c.styleSheets[h];
    var j=i.ownerNode||i.owningElement;
    if(j.getAttribute('data-cke-temp'))continue;
    if(i.href&&i.href.substr(0,9)=='chrome://')
      continue;
    var k=i.cssRules||i.rules;
    for(var l=0;l<k.length;l++)
      g.push(k[l].selectorText);
  }
  var m=verif(g,mauvais,bon);
  for(h=0;h<m.length;h++){
    var n=m[h].split('.'), p=n[1];
    // On récupère le nom du style
    var nom = p.split('_');
    nom = nom[0].toLowerCase();
    // On récupère le nom de la balise
    var type = n[0];
    f.push({
      name:nom,element:type,attributes:{'class':p}
    });
  }
  return f;
};

CKEDITOR.plugins.add('MesStyles',{
  requires:['styles'],
  onLoad:function(){
    var c=CKEDITOR.editor.prototype;
    c.getStylesSet=CKEDITOR.tools.override(
      c.getStylesSet,function(d){
        return function(e){
          var f=this;
          d.call(this,function(g){
            // Exception
            // body. ou une classe toute seule

            var mauvais = f.config.stylesheetParser_skipSelectors||/(^body\.|^\.)/i;
            // Style à mettre dans la liste
            //nomBalise.nomDuStyle_StylePerso
            //exemple: span.monStyle_StylePerso
            var bon = f.config.stylesheetParser_validSelectors || /(\w+\.\w+_StylePerso)/;
            e(f._.stylesDefinitions = g.concat(ajout(f.document.$,mauvais,bon)));
          });
        };
      });
    }
  });
})();

Le code ci-dessus permet l’ajout des styles personnalisés. Ces styles doivent commencer par un nom de balise suivi d’un point, suivi du nom à afficher dans la liste des styles, et suivi de _StylePerso (par exemple p.tutorielsenfolie_StylePerso).

Maintenant, nous pouvons intégrer ce nouveau plugin dans notre éditeur de texte. Pour ce faire, modifiez le fichier /CKEditor/modules/CKEDITOR_config.js de la sorte :

CKEDITOR_config.js

...
contentsCss: 'style.css',
extraPlugins: 'MesStyles',
stylesSet: [ ]
...

Modifions ensuite la feuille de style CSS (/style.css) :

style.css

...
p.tutorielsenfolie_StylePerso{
  color:red;
  font-weight:bold;
}

em.important_StylePerso{
  color:red;
  text-decoration:underline;
}

Voilà nous avons maintenant notre liste de styles qui est personnalisée.

CKEditor style perso

Tu as aimé ce tutoriel ?
Aide nous à améliorer le site ! Deviens partenaire officiel ou suis nous sur facebook !

<<Tutoriel précédent 

Commentaires[0]

Tu as aimé ce tutoriel ? Alors partage-le avec tes amis !
Partager sur Facebook Partager sur Twitter Partager sur Myspace Partager sur Stumbleupon Soumettre sur Reddit Partager sur Digg Ajouter à vos favoris Technorati Ajouter à vos favoris Live Ajouter à vos favoris Google Ajouter sur vos favoris Yahoo Voir le flux rss

Mots Clés: CKEditor CSS editeur de texte html JavaScript liste des styles personnaliser plugin web

Veve :
(11/04/2013 - 17:19:44)
il faut juste mettre "sudo" à la place de "su" pour exécuter la commande en root

Veve :
(11/04/2013 - 17:18:56)
Salut tu peux aller lire ce tutoriel: http://www.tutorielsenfolie.com/tutoriels-63-installation-configuration-opennebula.html Il fonctionne aussi sous ubuntu

safa.souissi4 :
(10/04/2013 - 20:58:13)
s'il vous plait c urgent :(

safa.souissi4 :
(10/04/2013 - 20:56:25)
bonsoir,je cherche un tutos pour installer opennebula.org sous ubuntu 12.

Veve :
(18/03/2013 - 20:07:49)
oui, j'essaye de voir d'ou viens le problème.

sonde :
(18/03/2013 - 13:29:57)
re merci (j apprend un peu plus) je crois que j ai trouver pourquoi je peu pas poster si il y a ligne code impossible de poster lol

Veve :
(17/03/2013 - 21:34:49)
Salut, j'espère que ça t'a aidé.

sonde :
(17/03/2013 - 09:59:02)
pour ton aide

sonde :
(17/03/2013 - 09:57:36)
slt Veve impossible de laisser com

sonde :
(17/03/2013 - 09:56:55)
??

Demi-dieu :
(15/03/2013 - 18:41:13)
salut ^^

sonde :
(13/03/2013 - 14:49:35)
un petit coucou

Tanamoureuse :
(29/09/2011 - 06:11:08)
Je t'aime

Faire un don

Ma Publicité ici


Faire un don