paste, drag and drop image applied fixed #305, #304, #300

nhn · Jan 2, 2020 · 437ec4b · 437ec4b
1 parent 412b26e
commit 437ec4b
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 44 deletions.
diff --git a/apps/core/demo/demo.html b/apps/core/demo/demo.html
@@ -44,7 +44,7 @@
                 done([1,2,3]);
             }
         },
-        exts: ['scrollFollow', 'colorSyntax'],
+        exts: ['scrollFollow', 'colorSyntax', 'textPalette'],
         hooks: {
             'previewBeforeHook': function($dom) {
                 //console.log('previewBeforeHook', $dom);

diff --git a/apps/core/src/js/editor.js b/apps/core/src/js/editor.js
@@ -119,6 +119,8 @@ function NeonEditor(options) {
         self.eventManager.emit('load', self);
     });
 
+    this._initImportEvent();
+
     __nedInstance.push(this);
 }
 
@@ -147,6 +149,50 @@ NeonEditor.prototype._initDefaultCommands = function() {
     this.commandManager.addCommand(wwTask);
 };
 
+NeonEditor.prototype._initImportEvent = function() {
+    var self = this;
+
+    this.eventManager.listen('paste', function(ev) {
+        var items, blob, i, itemLen;
+
+        items = ev.data.clipboardData && ev.data.clipboardData.items;
+
+        if (items) {
+            itemLen = items.length;
+
+            for (i = 0; i < itemLen; i += 1) {
+                if (items[i].type.indexOf('image') !== -1) {
+                    blob = items[i].getAsFile();
+
+                    self.eventManager.emit('addImageBlobHook', blob, function(url) {
+                        self.eventManager.emit('command', 'AddImage', {imageUrl: url, altText: blob.name || 'image'});
+                    });
+                }
+            }
+        }
+    });
+
+    this.eventManager.listen('drop', function(ev) {
+        var items, blob, i, itemLen;
+
+        items = ev.data.dataTransfer && ev.data.dataTransfer.files;
+
+        if (items) {
+            itemLen = items.length;
+
+            for (i = 0; i < itemLen; i += 1) {
+                if (items[i].type.indexOf('image') !== -1) {
+                    blob = items[i];
+
+                    self.eventManager.emit('addImageBlobHook', blob, function(url) {
+                        self.eventManager.emit('command', 'AddImage', {imageUrl: url, altText: blob.name || 'image'});
+                    });
+                }
+            }
+        }
+    });
+};
+
 /**
  * 프리뷰가 보여지는 방식을 변경한다
  * @param {string} style 스타일 이름 tab, vertical

diff --git a/apps/core/src/js/markdownEditor.js b/apps/core/src/js/markdownEditor.js
@@ -77,54 +77,11 @@ MarkdownEditor.prototype._initEvent = function() {
     });
 
     this.cm.on('drop', function(cm, eventData) {
-        console.log(eventData);
         self.eventManager.emit('drop', {
             source: 'markdown',
             data: eventData
         });
     });
-
-    this.eventManager.listen('paste', function(ev) {
-        var items, blob, i, itemLen;
-
-        items = ev.data.clipboardData && ev.data.clipboardData.items;
-
-        if (items) {
-            itemLen = items.length;
-
-            for (i = 0; i < itemLen; i += 1) {
-                if (items[i].type.indexOf('image') !== -1) {
-                    blob = items[i].getAsFile();
-
-                    self.eventManager.emit('addImageBlobHook', blob, function(url) {
-                        self.eventManager.emit('command', 'AddImage', {imageUrl: url, altText: blob.name || 'image'});
-                    });
-                }
-            }
-        }
-    });
-
-    this.eventManager.listen('drop', function(ev) {
-        var items, blob, i, itemLen;
-
-        items = ev.data.dataTransfer && ev.data.dataTransfer.files;
-
-            ev.data.preventDefault();
-        if (items) {
-            ev.data.preventDefault();
-            itemLen = items.length;
-
-            for (i = 0; i < itemLen; i += 1) {
-                if (items[i].type.indexOf('image') !== -1) {
-                    blob = items[i];
-
-                    self.eventManager.emit('addImageBlobHook', blob, function(url) {
-                        self.eventManager.emit('command', 'AddImage', {imageUrl: url, altText: blob.name || 'image'});
-                    });
-                }
-            }
-        }
-    });
 };
 
 /**

diff --git a/apps/core/src/js/popupAddImage.js b/apps/core/src/js/popupAddImage.js
@@ -109,6 +109,7 @@ PopupAddImage.prototype._linkWithEventManager = function() {
         } else {
             self._preAltValue = self.$el.find('.altTextInput').val();
             self.eventManager.emit('addImageFileHook', self._getImageFileForm(), self.applyImage);
+            //self.eventManager.emit('addImageBlobHook', self.$el.find('.imageFileInput')[0].files[0], self.applyImage);
         }
     });
 };

diff --git a/apps/core/src/js/wysiwygEditor.js b/apps/core/src/js/wysiwygEditor.js
@@ -143,11 +143,20 @@ WysiwygEditor.prototype._initSquireEvent = function() {
         });
     });
 
+    this.getEditor().addEventListener('dragover', function(e) {
+        e.preventDefault();
+        return false;
+    });
+
     this.getEditor().addEventListener('drop', function(eventData) {
+        eventData.preventDefault();
+
         self.eventManager.emit('drop', {
             source: 'wysiwyg',
             data: eventData
         });
+
+        return false;
     });
 
     this.getEditor().addEventListener('input', function() {