Bouton d'insertion d'image raccord avec le thème ckeditor4.

[ckeditor.git] / skins / ckeditor / plugins / plinn_image / plugin.js

diff --git a/skins/ckeditor/plugins/plinn_image/plugin.js b/skins/ckeditor/plugins/plinn_image/plugin.js
index 7181a9e..ebce6a9 100644 (file)
--- a/skins/ckeditor/plugins/plinn_image/plugin.js
+++ b/skins/ckeditor/plugins/plinn_image/plugin.js
@@ -1,4 +1,4 @@
-/* © Benoît Pin, MINES ParisTech */
+/* © 2011 Benoît Pin, MINES ParisTech */
 
 
 (function(){
@@ -23,23 +23,60 @@ function updateImageSizeUrlParameters(img) {
        }
 }
 
+function openPlinnImageDialog(path, editor) {
+       var winOptions  = "location=no,menubar=no,toolbar=no,dependent=yes,dialog=yes,minimizable=no,modal=yes,alwaysRaised=yes" +
+               ",resizable=yes"  +
+               ",width=801"  +
+               ",height=600";
+               //",top="  + iTop +
+               //",left=" + iLeft ;
+       
+       var win = open(path + 'dialog/plinn_image.html', 'PlinnImageDialog', winOptions);
+       win.dialogArguments = new Object();
+       win.dialogArguments.editor = editor;
+       win.dialogArguments.pluginPath = path;
+       win.dialogArguments.CKEDITOR = CKEDITOR;
+}
+
 
 CKEDITOR.plugins.add( 'plinn_image',
 {
        init : function( editor )
        {
+               /* Add listener on getData event to compute images
+                  src attributes before saving data.
+               */
                editor.on('instanceReady', function(){
                        editor.on('getData',
                                function(evt) {
-                                       var body = evt.editor.document.$.body;
-                                       var images = body.getElementsByTagName('IMG');
+                                       var tmpDiv = document.createElement('div');
+                                       tmpDiv.innerHTML = evt.data.dataValue;
+                                       var images = tmpDiv.getElementsByTagName('IMG');
                                        for (var i = 0 ; i < images.length ; i++)
                                                updateImageSizeUrlParameters(images[i]);
-                                       evt.data.dataValue = evt.editor.document.$.body.innerHTML;
+                                       evt.data.dataValue = tmpDiv.innerHTML;
                                }
                        );
                });
+               var pluginPath = this.path;
+               var allowed = 'img[alt,!src]{border-style,border-width,float,height,margin,margin-bottom,margin-left,margin-right,margin-top,width}';
+               var required = 'img[alt,src]';
+               var command = editor.addCommand('plinn_image',
+                       {
+                               exec : function(editor){openPlinnImageDialog(pluginPath, editor);},
+                               allowedContent: allowed,
+                               requiredContent: required
+                       }
+               );
+               
+               editor.ui.addButton('PlinnImage',
+                       {
+                               label : editor.lang.common.image,
+                               icon : pluginPath + 'dialog/plinn_image.png',
+                               command : 'plinn_image'
+                       });
        }
+       
 });
 
 })();