From 2bdb148bce3e004be85ef9570ef1bb11df486360 Mon Sep 17 00:00:00 2001 From: Martin Edenhofer Date: Tue, 10 May 2016 16:06:21 +0200 Subject: [PATCH] Added ie support and drag&drop image support. --- .../app/lib/base/jquery.contenteditable.js | 87 ++++++++++++++++++- 1 file changed, 83 insertions(+), 4 deletions(-) diff --git a/app/assets/javascripts/app/lib/base/jquery.contenteditable.js b/app/assets/javascripts/app/lib/base/jquery.contenteditable.js index 772ba4785..a39b741ab 100644 --- a/app/assets/javascripts/app/lib/base/jquery.contenteditable.js +++ b/app/assets/javascripts/app/lib/base/jquery.contenteditable.js @@ -188,7 +188,18 @@ _this.log('paste') // insert and in case, resize images - var clipboardData = e.originalEvent.clipboardData + var clipboardData + if (window.clipboardData) { // ie + clipboardData = window.clipboardData + } + else if (e.originalEvent.clipboardData) { // other browsers + clipboardData = e.originalEvent.clipboardData + } + else { + throw "No clipboardData support" + } + + var clipboardData = e.clipboardData || e.originalEvent.clipboardData if (clipboardData && clipboardData.items) { var imageInserted = false jQuery.each(clipboardData.items, function(index, item){ @@ -225,15 +236,15 @@ } // check existing + paste text for limit - var text = e.originalEvent.clipboardData.getData('text/html') + var text = clipboardData.getData('text/html') var docType = 'html' if (!text || text.length === 0) { docType = 'text' - text = e.originalEvent.clipboardData.getData('text/plain') + text = clipboardData.getData('text/plain') } if (!text || text.length === 0) { docType = 'text2' - text = e.originalEvent.clipboardData.getData('text') + text = clipboardData.getData('text') } _this.log('paste', docType, text) @@ -277,6 +288,74 @@ document.execCommand('insertHTML', false, text) return true }) + + this.$element.on('dragover', function (e) { + e.stopPropagation() + e.preventDefault() + _this.log('dragover') + }) + + this.$element.on('drop', function (e) { + e.stopPropagation(); + e.preventDefault(); + _this.log('drop') + + var dataTransfer + if (window.dataTransfer) { // ie + dataTransfer = window.dataTransfer + } + else if (e.originalEvent.dataTransfer) { // other browsers + dataTransfer = e.originalEvent.dataTransfer + } + else { + throw "No clipboardData support" + } + + // x and y coordinates of dropped item + x = e.clientX + y = e.clientY + var file = dataTransfer.files[0] + + // look for images + if (file.type.match('image.*')) { + var reader = new FileReader() + reader.onload = (function(e) { + var result = e.target.result + var img = document.createElement('img') + img.src = result + + //Insert the image at the carat + insert = function(dataUrl, width, height) { + + //console.log('dataUrl', dataUrl) + _this.log('image inserted') + result = dataUrl + img = $("") + img = img.get(0) + + if (document.caretPositionFromPoint) { + var pos = document.caretPositionFromPoint(x, y) + range = document.createRange(); + range.setStart(pos.offsetNode, pos.offset) + range.collapse() + range.insertNode(img) + } + else if (document.caretRangeFromPoint) { + range = document.caretRangeFromPoint(x, y) + range.insertNode(img) + } + else { + console.log('could not find carat') + } + } + + // resize if to big + App.ImageService.resize(img.src, 460, 'auto', 2, 'image/jpeg', 'auto', insert) + }) + reader.readAsDataURL(file) + } + }) + } // check if key is allowed, even if length limit is reached