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 tmpDiv = document.createElement('div');
  53                                         tmpDiv.innerHTML = evt.data.dataValue;
  54                                         var images = tmpDiv.getElementsByTagName('IMG');
  55                                         for (var i = 0 ; i < images.length ; i++)
  56                                                 updateImageSizeUrlParameters(images[i]);
  57                                         evt.data.dataValue = tmpDiv.innerHTML;
  58                                 }
  59                         );
  60                 });
  61                 var pluginPath = this.path;
  62                 var allowed = 'img[alt,!src]{border-style,border-width,float,height,margin,margin-bottom,margin-left,margin-right,margin-top,width}';
  63                 var required = 'img[alt,src]';
  64                 var command = editor.addCommand('plinn_image',
  65                         {
  66                                 exec : function(editor){openPlinnImageDialog(pluginPath, editor);},
  67                                 allowedContent: allowed,
  68                                 requiredContent: required
  69                         }
  70                 );
  71
  72                 editor.ui.addButton('PlinnImage',
  73                         {
  74                                 label : editor.lang.common.image,
  75                                 icon : pluginPath + 'dialog/plinn_image.png',
  76                                 command : 'plinn_image'
  77                         });
  78         }
  79
  80 });
  81
  82 })();