implemented dragging images directly into ckeditor area

ornicar · Mar 6, 2010 · 6857437 · 6857437
1 parent 0a4fef6
commit 6857437
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 58 deletions.
diff --git a/lib/dmCkEditor.class.php b/lib/dmCkEditor.class.php
@@ -2,6 +2,11 @@
 
 require_once dirname(__FILE__).'/vendor/simplehtmldom/simple_html_dom.php';
 
+/**
+ * 
+ * @author Robert Gründler <robert@dubture.com>
+ *
+ */
 class dmCkEditor 
 {
 
@@ -11,7 +16,11 @@ public function __construct(dmHelper $helper)
   {
     $this->helper = $helper;
   }
-
+
+  /**
+   * Renders the ckeditor contents
+   * @param string $data
+   */
   public function render($data) 
   {
 
@@ -23,7 +32,11 @@ public function render($data)
     return $html;
 
   }
-
+
+  /**
+   * 
+   * @param string $image
+   */
   protected function updateImage($image) 
   {
 

diff --git a/web/js/ckeditor/plugins/dmMedia/dialogs/dmMedia.js b/web/js/ckeditor/plugins/dmMedia/dialogs/dmMedia.js
diff --git a/web/js/ckeditor/plugins/dmMedia/plugin.js b/web/js/ckeditor/plugins/dmMedia/plugin.js
@@ -4,30 +4,38 @@ CKEDITOR.plugins.add('dmMedia',
   {
 		var pluginName = 'dmMedia';
 		var dialogName = editor.name + '_dialog';
+		var overlayid = 'drag_box_' + editor.name; 
 
-		if ($('#'+dialogName).length == 0) {
-			$('#dm_admin_content').append('<div id="' + dialogName +'"><input class="dm_ck_drop_zone"></input></div>');
-	    $('#'+dialogName).children(':first').dmDroppableInput(function() {                    
-	      $.ajax({
-	        url: '/admin.php/+/dmMedia/index/id/' + $(this).val().split(' ')[0].split(':')['1'],
-	        success: function(src) {
-	          editor.setData(src + editor.getData());
-	        }
-	      });
-	     });
-		}
+		CKEDITOR.instances[editor.name].on('instanceReady', function() {
+
+	    $('.image.ui-draggable').live('dragstart', function(event, ui) {
+			 $editor = $('#cke_' + editor.name);
+			 var offset = $editor.offset();
+			 $(document.body).append('<div id="'+overlayid+'"><input style="width: 100%; height: 100%;"></input></div>');
+
+			 $('#' + overlayid).css({
+			  position: 'absolute',
+				left:  offset.left + 'px',
+				top: offset.top + 'px',
+				height: $editor.height() +'px',
+				width: $editor.width() + 'px',
+				backgroundColor: 'white',
+				opacity: 0.5,
+				zIndex: 1000,
+				display: 'block'
+			 }).find('input:first').dmDroppableInput(function() {
+	        $.ajax({
+	          url: '/admin.php/+/dmMedia/index/id/' + $(this).val().split(' ')[0].split(':')['1'],
+	          success: function(src) {
+	            editor.setData(src + editor.getData());
+	          }
+	        });
+			  });
+      });
+		});
 
-		var $droppable = $('#'+dialogName).children(':first');
-	  editor.ui.addButton('dmImage', {
-			label: 'Add media',
-			click: function() {
-	      $('#' + dialogName).dialog({
-	        zIndex: 1,
-					open: function(event, ui) {
-						$droppable.val('');
-					}
-				});
-			}
-  });
+		$('.image.ui-draggable').live('dragstop', function(event, ui) {
+			$('#' + overlayid).remove();
+		});
 }
 });