skins/ckeditor/plugins/plinn_image/plugin.js

   1 /* © 2011 Benoît Pin, MINES ParisTech */
   2
   3
   4 (function(){
   5
   6 var reSize = /getResizedImage\?size=(\d+)_(\d+)$/;
   7
   8 function updateImageSizeUrlParameters(img) {
   9         if (reSize.test(img.src)){
  10                 var matches = reSize.exec(img.src);
  11                 var srcWidth = parseInt(matches[1]);
  12                 var srcHeight = parseInt(matches[2]);
  13
  14                 var imgWidth = parseInt((img.style.width) ? img.style.width : img.width);
  15                 var imgHeight = parseInt((img.style.height) ? img.style.height : img.height);
  16
  17                 if ((imgWidth && imgHeight) && srcWidth != imgWidth && srcHeight != imgHeight) {
  18                         var newUrl = img.getAttribute('src', 2).replace(reSize, 'getResizedImage?size=' + imgWidth + '_' + imgHeight);
  19                         img.width = imgWidth;
  20                         img.height = imgHeight;
  21                         img.src = newUrl;
  22                 }
  23         }
  24 }
  25
  26 function openPlinnImageDialog(path, editor) {
  27         var winOptions  = "location=no,menubar=no,toolbar=no,dependent=yes,dialog=yes,minimizable=no,modal=yes,alwaysRaised=yes" +
  28                 ",resizable=yes"  +
  29                 ",width=801"  +
  30                 ",height=600";
  31                 //",top="  + iTop +
  32                 //",left=" + iLeft ;
  33
  34         var win = open(path + 'dialog/plinn_image.html', 'PlinnImageDialog', winOptions);
  35         win.dialogArguments = new Object();
  36         win.dialogArguments.editor = editor;
  37         win.dialogArguments.pluginPath = path;
  38 }
  39
  40
  41 CKEDITOR.plugins.add( 'plinn_image',
  42 {
  43         init : function( editor )
  44         {
  45                 /* Add listener on getData event to compute images
  46                    src attributes before saving data.
  47                 */
  48                 editor.on('instanceReady', function(){
  49                         editor.on('getData',
  50                                 function(evt) {
  51                                         var body = evt.editor.document.$.body;
  52                                         var images = body.getElementsByTagName('IMG');
  53                                         for (var i = 0 ; i < images.length ; i++)
  54                                                 updateImageSizeUrlParameters(images[i]);
  55                                         evt.data.dataValue = evt.editor.document.$.body.innerHTML;
  56                                 }
  57                         );
  58                 });
  59                 var pluginPath = this.path;
  60                 var command = editor.addCommand('plinn_image',
  61                         {
  62                                 exec : function(editor){openPlinnImageDialog(pluginPath, editor);}
  63                         });
  64
  65                 editor.ui.addButton('PlinnImage',
  66                         {
  67                                 label : editor.lang.common.image,
  68                                 icon : pluginPath + 'dialog/plinn_image.gif',
  69                                 command : 'plinn_image'
  70                         });
  71         }
  72 });
  73
  74 })();