skins/ckeditor/plugins/plinn_styles/plugin.js

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