( function() {
var PlinnStylesCombo = function(editor) {
+ this.editor = editor;
this.label = 'Styles';
this.title = 'CSS Styles';
this.toolbar = 'styles,10';
multiSelect : true,
attributes : {'aria-label': this.title}
};
+ this.styles = [];
};
+PlinnStylesCombo.prototype.loadStyle = function(definition) {
+ this.styles.push(definition);
+ this.styles[definition.name] = definition;
+};
+
+PlinnStylesCombo.prototype.init = function() {
+ var i, style;
+ for (i=0 ; i < this.styles.length ; i++) {
+ style = this.styles[i];
+ this.add(style.name,
+ '<div class="' + style.className + '">' +
+ style.name +
+ '</div>',
+ style.name
+ );
+ }
+};
+
+PlinnStylesCombo.prototype.onClick = function(value) {
+ this.editor.focus();
+ this.editor.fire( 'saveSnapshot' );
+ var style = this.styles[value]
+ var className = style.className;
+ var element = this.editor.elementPath().lastElement;
+ if (element.hasClass(className)) {
+ element.removeClass(className);
+ }
+ else {
+ element.addClass(className);
+ }
+ this.editor.fire( 'saveSnapshot' );
+};
var PlinnStylePlugin = function() {
this.requires = 'richcombo';
+ this.combo = undefined;
};
PlinnStylePlugin.prototype.init = function(editor) {
- var psc = new PlinnStylesCombo(editor);
- editor.ui.addRichCombo('PlinnStyles', psc);
- editor.on('stylesSet', this.onStylesSet);
+ this.combo = new PlinnStylesCombo(editor);
+ editor.ui.addRichCombo('PlinnStyles', this.combo);
+ var self = this;
+ editor.on('stylesSet', function(evt){self.onStylesSet(evt)});
};
PlinnStylePlugin.prototype.onStylesSet = function(evt) {
var stylesDefinitions = evt.data.styles;
if (!stylesDefinitions) { return; }
+ var i;
+ for(i=0 ; i < stylesDefinitions.length ; i++) {
+ this.combo.loadStyle(stylesDefinitions[i]);
+ }
};
// main
CKEDITOR.plugins.add( 'plinn_styles', new PlinnStylePlugin());
-} )();
+} ());