skins/ckeditor/plugins/plinn_styles/plugin.js

   1 /* © 2014 Benoît Pin, MINES ParisTech */
   2 ( function() {
   3
   4 var PlinnStylesCombo = function(editor) {
   5         this.editor = editor;
   6         this.label = 'Styles';
   7         this.title = 'CSS Styles';
   8         this.toolbar = 'styles,10';
   9         this.panel = {
  10                 css : [CKEDITOR.skin.getPath( 'editor' )].concat(editor.config.contentsCss),
  11                 multiSelect : true,
  12                 attributes : {'aria-label': this.title}
  13         };
  14         this.styles = [];
  15 };
  16
  17 PlinnStylesCombo.prototype.onRender = function() {
  18         var self = this;
  19         this.editor.on('selectionChange', function(evt){self.checkSelection(evt);});
  20 };
  21
  22 PlinnStylesCombo.prototype.checkSelection = function(evt) {
  23         if (evt.data.selection.getRanges().length > 1) {
  24                 this.disable();
  25         }
  26         else {
  27                 this.enable();
  28         }
  29 };
  30
  31 PlinnStylesCombo.prototype.loadStyle = function(definition) {
  32         this.styles.push(definition);
  33         this.styles[definition.name] = definition;
  34 };
  35
  36 PlinnStylesCombo.prototype.init = function() {
  37         var i, style;
  38         for (i=0 ; i < this.styles.length ; i++) {
  39                 style = this.styles[i];
  40                 this.add(style.name,
  41                                  '<div class="' + style.className + '">' +
  42                                         style.name +
  43                                  '</div>',
  44                                  style.name
  45                                 );
  46         }
  47 };
  48
  49 PlinnStylesCombo.prototype.onClick = function(value) {
  50         this.editor.focus();
  51         this.editor.fire('saveSnapshot');
  52         var style = this.styles[value]
  53         var className = style.className;
  54         var ranges = this.editor.getSelection().getRanges();
  55         var element = this.editor.elementPath().lastElement;
  56         if(ranges.length === 1) {
  57                 var start = ranges[0].startContainer;
  58                 var end = ranges[0].endContainer;
  59                 if(start.$ !== end.$) {
  60                         // selection is a fragment that need to be wrapped in container to apply style
  61                         element = new CKEDITOR.dom.element('div');
  62                         element.append(ranges[0].cloneContents());
  63                         this.editor.insertElement(element);
  64                 }
  65         }
  66         if (element.hasClass(className)) {
  67                 element.removeClass(className);
  68         }
  69         else {
  70                 element.addClass(className);
  71         }
  72         this.editor.fire('saveSnapshot');
  73 };
  74
  75 var PlinnStylePlugin = function() {
  76         this.requires = 'richcombo';
  77         this.combo = undefined;
  78 };
  79
  80 PlinnStylePlugin.prototype.init = function(editor) {
  81         this.combo = new PlinnStylesCombo(editor);
  82         editor.ui.addRichCombo('PlinnStyles', this.combo);
  83         var self = this;
  84         editor.on('stylesSet', function(evt){self.onStylesSet(evt);});
  85 };
  86
  87 PlinnStylePlugin.prototype.onStylesSet = function(evt) {
  88         var stylesDefinitions = evt.data.styles;
  89         if (!stylesDefinitions) { return; }
  90         var i;
  91         for(i=0 ; i < stylesDefinitions.length ; i++) {
  92                 this.combo.loadStyle(stylesDefinitions[i]);
  93         }
  94
  95 };
  96
  97
  98 // main
  99 CKEDITOR.plugins.add( 'plinn_styles', new PlinnStylePlugin());
 100
 101 } ());