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         win.dialogArguments.CKEDITOR = CKEDITOR;
  39 }
  40
  41
  42 CKEDITOR.plugins.add( 'plinn_image',
  43 {
  44         init : function( editor )
  45         {
  46                 /* Add listener on getData event to compute images
  47                    src attributes before saving data.
  48                 */
  49                 editor.on('instanceReady', function(){
  50                         editor.on('getData',
  51                                 function(evt) {
  52                                         var body = evt.editor.document.$.body;
  53                                         var images = body.getElementsByTagName('IMG');
  54                                         for (var i = 0 ; i < images.length ; i++)
  55                                                 updateImageSizeUrlParameters(images[i]);
  56                                         evt.data.dataValue = evt.editor.document.$.body.innerHTML;
  57                                 }
  58                         );
  59                 });
  60                 var pluginPath = this.path;
  61                 var command = editor.addCommand('plinn_image',
  62                         {
  63                                 exec : function(editor){openPlinnImageDialog(pluginPath, editor);}
  64                         });
  65
  66                 editor.ui.addButton('PlinnImage',
  67                         {
  68                                 label : editor.lang.common.image,
  69                                 icon : pluginPath + 'dialog/plinn_image.gif',
  70                                 command : 'plinn_image'
  71                         });
  72         }
  73 });
  74
  75 })();