Canevas pour un nouveau plugin d'application de styles basés sur des classes css...
authorBenoît Pin <benoit.pin@gmail.com>
Tue, 29 Jul 2014 14:01:22 +0000 (16:01 +0200)
committerBenoît Pin <benoit.pin@gmail.com>
Tue, 29 Jul 2014 14:01:22 +0000 (16:01 +0200)
skins/ckeditor/config.js
skins/ckeditor/plugins/plinn_styles/plugin.js [new file with mode: 0644]

index dea13f2..9aeb8f7 100644 (file)
@@ -11,7 +11,7 @@ CKEDITOR.editorConfig = function( config )
        
        // toolbar
        config.toolbar = [
        
        // toolbar
        config.toolbar = [
-               { name: 'styles',               items : [ 'Styles','Format', 'Font', 'FontSize' ] },
+               { name: 'styles',               items : [ 'PlinnStyles','Format', 'Font', 'FontSize' ] },
                { name: 'colors',               items : [ 'TextColor', 'BGColor' ] },
                { name: 'document',             items : [ 'Maximize', 'ShowBlocks', 'Source'] },
                { name: 'editing',              items : [ 'Find','Replace', '-', 'SelectAll'] },
                { name: 'colors',               items : [ 'TextColor', 'BGColor' ] },
                { name: 'document',             items : [ 'Maximize', 'ShowBlocks', 'Source'] },
                { name: 'editing',              items : [ 'Find','Replace', '-', 'SelectAll'] },
@@ -36,7 +36,7 @@ CKEDITOR.editorConfig = function( config )
        config.filebrowserWindowWidth = 801;
        config.attachmentBrowserConnectorUrl = CKEDITOR.basePath + 'plugins/plinn_image/connectors/plinn/connector';
        config.imageMaxDefaultDimension = 500 ; // image inserted will be cropped at this size.
        config.filebrowserWindowWidth = 801;
        config.attachmentBrowserConnectorUrl = CKEDITOR.basePath + 'plugins/plinn_image/connectors/plinn/connector';
        config.imageMaxDefaultDimension = 500 ; // image inserted will be cropped at this size.
-       config.extraPlugins = 'plinn_image,codemirror';
+       config.extraPlugins = 'plinn_image,plinn_styles,codemirror';
 
        config.stylesSet = 'plinn_styles:' + CKEDITOR.basePath + 'plinn_ckeditor_styles.js'; 
 };
\ No newline at end of file
 
        config.stylesSet = 'plinn_styles:' + CKEDITOR.basePath + 'plinn_ckeditor_styles.js'; 
 };
\ No newline at end of file
diff --git a/skins/ckeditor/plugins/plinn_styles/plugin.js b/skins/ckeditor/plugins/plinn_styles/plugin.js
new file mode 100644 (file)
index 0000000..009e5d2
--- /dev/null
@@ -0,0 +1,35 @@
+( function() {
+
+var PlinnStylesCombo = function(editor) {
+       this.label = 'Styles';
+       this.title = 'CSS Styles';
+       this.toolbar = 'styles,10';
+       this.panel = {
+               css : [CKEDITOR.skin.getPath( 'editor' )].concat(editor.config.contentsCss),
+               multiSelect : true,
+               attributes : {'aria-label': this.title}
+       };
+};
+
+
+var PlinnStylePlugin = function() {
+       this.requires = 'richcombo';
+};
+
+PlinnStylePlugin.prototype.init = function(editor) {
+       var psc = new PlinnStylesCombo(editor);
+       editor.ui.addRichCombo('PlinnStyles', psc);
+       editor.on('stylesSet', this.onStylesSet);
+};
+
+PlinnStylePlugin.prototype.onStylesSet = function(evt) {
+       var stylesDefinitions = evt.data.styles;
+       if (!stylesDefinitions) { return; }
+       
+};
+
+
+// main
+CKEDITOR.plugins.add( 'plinn_styles', new PlinnStylePlugin());
+
+} )();