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