Galactic Civilizations 3
CKEditor - Styles list

CKEditor - Styles list

Category: Javascript.
Posted by on the 01/07/2013.
Last update on the 04/07/2013.

<<Previous tutorial 

Description

This tutorial explains how to customize styles list of your text editor « CKEditor ».

Introduction

This tutorial can be realized with a simple text editor like « Notepad ». This tutorial requires some basic knowledge in HTML. It also requires that CKEditor is correctly installed.

We will consider that the file that contains the text editor (index.html) is in the root directory, that the CKEditor's configuration files are in /CKEditor/ckeditor and that the plugins are in /CKEditor/plugins.

Customization of the styles list

Now, we will customize the styles list of our text editor.

CKEditor liste des styles par défaut

First of all, we need to modify the file /CKEditor/plugins/CKEDITOR_config.js in order to remove the default styles :

CKEDITOR_config.js

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

Then, we will write the plugin that allows customizing the styles list. To do that, create the folder /CKEditor/ckeditor/plugins/MyStyles. In this folder, create the file plugin.js.

plugin.js

(
function(){
// Allow to retrieved the custom styles list.
function check(c,bad,good){
  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(good.test(j)&&!bad.test(j) && CKEDITOR.tools.indexOf(h,j)==-1)
      // We put the style in the styles list
      h.push(j);
  }
  return h;
};

// Allow to add the custom styles to the list.
function add(c,bad,good){
  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=check(g,bad,good);
  for(h=0;h<m.length;h++){
    var n=m[h].split('.'), p=n[1];
    // We retrieve the name of the style.
    var styleName = p.split('_');
    styleName = styleName[0].toLowerCase();
    // We retrieve the name of the html tag.
    var type = n[0];
    f.push({
      name:styleName,element:type,attributes:{'class':p}
    });
  }
  return f;
};

CKEDITOR.plugins.add('MyStyles',{
  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. or a class

            var bad = f.config.stylesheetParser_skipSelectors||/(^body\.|^\.)/i;
            // Style to put in the list
            //tagName.styleName_StylePerso
            //example: span.myStyle_StylePerso
            var good = f.config.stylesheetParser_validSelectors || /(\w+\.\w+_StylePerso)/;
            e(f._.stylesDefinitions = g.concat(add(f.document.$,bad,good)));
          });
        };
      });
    }
  });
})();

The above code allows to add custom styles. These styles must start by the name of the HTML tag followed by a dot which is followed by the name to display in the styles list. The styles must end by _StylePerso (For example p.tutorielsenfolie_StylePerso).

Now, we can integrate this new plugin to our text editor. To do that modify the file /CKEditor/plugins/CKEDITOR_config.js like that :

CKEDITOR_config.js

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

We will modify the CSS style sheet(/style.css) :

style.css

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

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

Now we have finished the customization of our style list.

CKEditor style perso

You like this tutorial ?
Like this website in order to promote it on facebook !

<<Previous tutorial 

You like this tutorial ? Share it with your friends !
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