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
  27 CKEDITOR.plugins.add( 'plinn_image',
  28 {
  29         init : function( editor )
  30         {
  31                 /* Add listener on getData event to compute images
  32                    src attributes before saving data.
  33                 */
  34                 editor.on('instanceReady', function(){
  35                         editor.on('getData',
  36                                 function(evt) {
  37                                         var body = evt.editor.document.$.body;
  38                                         var images = body.getElementsByTagName('IMG');
  39                                         for (var i = 0 ; i < images.length ; i++)
  40                                                 updateImageSizeUrlParameters(images[i]);
  41                                         evt.data.dataValue = evt.editor.document.$.body.innerHTML;
  42                                 }
  43                         );
  44                 });
  45
  46                 var command = editor.addCommand('plinn_image',
  47                         {
  48                                 exec : function(editor) {
  49                                         alert('Bonjour la France !');
  50                                 }
  51                         });
  52
  53                 editor.ui.addButton('PlinnImage',
  54                         {
  55                                 label : editor.lang.common.image,
  56                                 icon : this.path + 'dialog/plinn_image.gif',
  57                                 command : 'plinn_image'
  58                         });
  59                 console.log(this.path);
  60         }
  61 });
  62
  63 })();