Pastebin launched a little side project called VERYVIRAL.com, check it out ;-) Want more features on Pastebin? Sign Up, it's FREE!
Guest

Image.js Plugin CKEditor

By: a guest on Apr 5th, 2012  |  syntax: JavaScript  |  size: 6.04 KB  |  views: 70  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. /*
  2. Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
  3. For licensing, see LICENSE.html or http://ckeditor.com/license
  4. */
  5.  
  6. (function() {
  7.         // Load image preview.
  8.         var IMAGE = 1,
  9.         CLEANUP = 8;
  10.  
  11.         var imageDialog = function(editor) {
  12.                 var onImgLoadEvent = function() {
  13.                         // Image is ready.
  14.                         var original = this.originalElement;
  15.                         original.setCustomData('isReady', 'true');
  16.                         original.removeListener('load', onImgLoadEvent);
  17.                         original.removeListener('error', onImgLoadErrorEvent);
  18.                         original.removeListener('abort', onImgLoadErrorEvent);
  19.  
  20.                 };
  21.  
  22.                 var onImgLoadErrorEvent = function() {
  23.                         // Error. Image is not loaded.
  24.                         var original = this.originalElement;
  25.                         original.removeListener('load', onImgLoadEvent);
  26.                         original.removeListener('error', onImgLoadErrorEvent);
  27.                         original.removeListener('abort', onImgLoadErrorEvent);
  28.  
  29.                         // Set Error image.
  30.                         var noimage = CKEDITOR.getUrl(editor.skinPath + 'images/noimage.png');
  31.  
  32.                 };
  33.                 return {
  34.                         title: editor.lang.image.title,
  35.                         minWidth: 420,
  36.                         minHeight: 310,
  37.                         onShow: function() {
  38.                                 this.imageElement = false;
  39.                                 this.imageEditMode = false;
  40.  
  41.                                 var editor = this.getParentEditor(),
  42.                                 sel = this.getParentEditor().getSelection(),
  43.                                 element = sel.getSelectedElement();
  44.  
  45.                                 // Copy of the image
  46.                                 this.originalElement = editor.document.createElement('img');
  47.                                 this.originalElement.setAttribute('rel', '');
  48.                                 this.originalElement.setCustomData('isReady', 'false');
  49.  
  50.                                 if (element && element.getName() == 'img' && ! element.getAttribute('_cke_protected_html')) this.imageEditMode = 'img';
  51.  
  52.                                 if (this.imageEditMode || this.imageElement) {
  53.                                         if (!this.imageElement) this.imageElement = element;
  54.  
  55.                                         // Fill out all fields.
  56.                                         this.setupContent(IMAGE, this.imageElement);
  57.                                 }
  58.                         },
  59.                         onOk: function() {
  60.                                 // Create a new image
  61.                                 if (!this.imageEditMode) {
  62.                                         // Image dialog -> create IMG element.
  63.                                         this.imageElement = editor.document.createElement('img');
  64.                                         this.imageElement.setAttribute('rel', '');
  65.                                 }
  66.  
  67.                                 // Set attributes.
  68.                                 this.commitContent(IMAGE, this.imageElement);
  69.  
  70.                                 // Insert a new Image.
  71.                                 if (!this.imageEditMode) {
  72.                                         editor.insertElement(this.imageElement);
  73.                                 }
  74.                         },
  75.                         onLoad: function() {
  76.                                 var doc = this._.element.getDocument();
  77.                         },
  78.                         onHide: function() {
  79.                                 if (this.originalElement) {
  80.                                         this.originalElement.removeListener('load', onImgLoadEvent);
  81.                                         this.originalElement.removeListener('error', onImgLoadErrorEvent);
  82.                                         this.originalElement.removeListener('abort', onImgLoadErrorEvent);
  83.                                         this.originalElement.remove();
  84.                                         this.originalElement = false; // Dialog is closed.
  85.                                 }
  86.                         },
  87.                         contents: [{
  88.                                 id: 'info',
  89.                                 label: editor.lang.image.infoTab,
  90.                                 accessKey: 'I',
  91.                                 elements: [{
  92.                                         type: 'vbox',
  93.                                         padding: 0,
  94.                                         children: [
  95.                                         {
  96.                                                 type: 'hbox',
  97.                                                 widths: ['280px', '110px'],
  98.                                                 align: 'right',
  99.                                                 children: [{
  100.                                                         id: 'txtUrl',
  101.                                                         type: 'text',
  102.               label : editor.lang.common.url,
  103.                                                         onChange: function() {
  104.                                                                 var dialog = this.getDialog(),
  105.                                                                 newUrl = this.getValue();
  106.  
  107.                                                                 //Update original image
  108.                                                                 if (newUrl.length > 0) //Prevent from load before onShow
  109.                                                                 {
  110.                                                                         dialog = this.getDialog();
  111.                                                                         var original = dialog.originalElement;
  112.  
  113.                                                                         original.setCustomData('isReady', 'false');
  114.  
  115.                                                                         original.on('load', onImgLoadEvent, dialog);
  116.                                                                         original.on('error', onImgLoadErrorEvent, dialog);
  117.                                                                         original.on('abort', onImgLoadErrorEvent, dialog);
  118.                                                                         original.setAttribute('src', newUrl);
  119.  
  120.                                                                 }
  121.                                                         },
  122.                                                         setup: function(type, element) {
  123.                                                                 if (type == IMAGE) {
  124.                                                                         var url = element.data('cke-saved-src') || element.getAttribute('src');
  125.                                                                         var field = this;
  126.  
  127.                                                                         // In IE7 the dialog is being rendered improperly when loading
  128.                                                                         // an image with a long URL. So we need to delay it a bit. (#4122)
  129.                                                                         setTimeout(function() {
  130.                                                                                 field.setValue(url); // And call this.onChange()
  131.                                                                                 field.focus();
  132.                                                                         },
  133.                                                                         0);
  134.                                                                 }
  135.                                                         },
  136.                                                         commit: function(type, element) {
  137.                                                                 if (type == IMAGE && (this.getValue() || this.isChanged())) {
  138.                                                                         element.data('cke-saved-src', decodeURI(this.getValue()));
  139.                                                                         element.setAttribute('src', decodeURI(this.getValue()));
  140.                                                                         element.removeAttribute('width');
  141.                                                                         element.removeAttribute('height');
  142.                                                                 }
  143.                                                                 else if (type == CLEANUP) {
  144.                                                                         element.setAttribute('src', ''); // If removeAttribute doesn't work.
  145.                                                                         element.removeAttribute('src');
  146.                                                                 }
  147.                                                         }
  148.                                                 },
  149.                                                 {
  150.                                                         type: 'button',
  151.                                                         id: 'browse',
  152.                                                         align: 'center',
  153.                                                         label: editor.lang.common.browseServer,
  154.                                                         hidden: true,
  155.                                                         filebrowser: 'info:txtUrl'
  156.                                                 }]
  157.                                         }]
  158.                                 },
  159.                                 {
  160.                                         id: 'txtRel',
  161.                                         type: 'text',
  162.                                         label: "Relação (rel)",
  163.                                         accessKey: 'R',
  164.                                         'default': '',
  165.                                         onChange: function() {},
  166.                                         setup: function(type, element) {
  167.                                                 if (type == IMAGE) this.setValue(element.getAttribute('rel'));
  168.                                         },
  169.                                         commit: function(type, element) {
  170.                                                 if (type == IMAGE) {
  171.                                                         if (this.getValue() || this.isChanged()) element.setAttribute('rel', this.getValue());
  172.                                                 }
  173.                                                 else if (type == CLEANUP) {
  174.                                                         element.removeAttribute('rel');
  175.                                                 }
  176.                                         }
  177.                                 },
  178.                                 {
  179.                                         id: 'txtAlt',
  180.                                         type: 'text',
  181.                                         label: editor.lang.image.alt,
  182.                                         accessKey: 'A',
  183.                                         'default': '',
  184.                                         onChange: function() {},
  185.                                         setup: function(type, element) {
  186.                                                 if (type == IMAGE) this.setValue(element.getAttribute('alt'));
  187.                                         },
  188.                                         commit: function(type, element) {
  189.                                                 if (type == IMAGE) {
  190.                                                         if (this.getValue() || this.isChanged()) element.setAttribute('alt', this.getValue());
  191.                                                 }
  192.                                                 else if (type == CLEANUP) {
  193.                                                         element.removeAttribute('alt');
  194.                                                 }
  195.                                         }
  196.                                 }]
  197.                         }]
  198.                 };
  199.         };
  200.  
  201.         CKEDITOR.dialog.add('image', function(editor) {
  202.                 return imageDialog(editor);
  203.         });
  204. })();