From 3f88a67eef7a9cb3772b58bc169d22ddaaf42b17 Mon Sep 17 00:00:00 2001 From: guange <8863824@gmail.com> Date: Wed, 6 May 2015 23:32:34 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=99=A8=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E7=9B=B4=E6=8E=A5=E7=B2=98=E8=B4=B4QQ=E6=88=AA=E5=B1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/rails_kindeditor/helper.rb | 4 +- .../assets/kindeditor/plugins/paste/paste.js | 37 +++ public/javascripts/paste.js | 292 ++++++++++++++++++ 3 files changed, 331 insertions(+), 2 deletions(-) create mode 100644 public/assets/kindeditor/plugins/paste/paste.js create mode 100644 public/javascripts/paste.js diff --git a/lib/rails_kindeditor/lib/rails_kindeditor/helper.rb b/lib/rails_kindeditor/lib/rails_kindeditor/helper.rb index 33d44a2ec..56b4c7adf 100644 --- a/lib/rails_kindeditor/lib/rails_kindeditor/helper.rb +++ b/lib/rails_kindeditor/lib/rails_kindeditor/helper.rb @@ -55,7 +55,7 @@ module RailsKindeditor }" else "KindEditor.ready(function(K){ - #{editor_id}K.create('##{dom_id}', #{get_options(options).to_json}); + #{editor_id}K.create('##{dom_id}', #{get_options(options).to_json}).loadPlugin('paste'); });" end end @@ -101,4 +101,4 @@ module RailsKindeditor @template.send("kindeditor", @object_name, method, objectify_options(options)) end end -end \ No newline at end of file +end diff --git a/public/assets/kindeditor/plugins/paste/paste.js b/public/assets/kindeditor/plugins/paste/paste.js new file mode 100644 index 000000000..0f63ce18c --- /dev/null +++ b/public/assets/kindeditor/plugins/paste/paste.js @@ -0,0 +1,37 @@ +KindEditor.plugin('paste', function(K) { + var editor = this, + name = 'paste'; + var contentWindow = document.getElementsByTagName('iframe')[0].contentWindow; + contentWindow.document.getElementsByTagName('body')[0].onpaste = function(event) { + // use event.originalEvent.clipboard for newer chrome versions + var items = (event.clipboardData || event.originalEvent.clipboardData).items; + console.log(JSON.stringify(items)); // will give you the mime types + // find pasted image among pasted items + var blob = null; + for (var i = 0; i < items.length; i++) { + if (items[i].type.indexOf("image") === 0) { + blob = items[i].getAsFile(); + } + } + // load image if there is a pasted image + if (blob !== null) { + var reader = new FileReader(); + reader.onload = function(event) { + console.log(event.target.result); // data url! + var data = new FormData(); + data.append("imgFile", blob, "imageFilename.png"); + $.ajax({ + url: '/kindeditor/upload?dir=image', + contentType: false, + type: 'POST', + data: data, + processData: false, + success: function(data) { + editor.exec('insertimage', JSON.parse(data).url); + } + }); + }; + reader.readAsDataURL(blob); + } + } +}); diff --git a/public/javascripts/paste.js b/public/javascripts/paste.js new file mode 100644 index 000000000..961a29acb --- /dev/null +++ b/public/javascripts/paste.js @@ -0,0 +1,292 @@ +// Generated by CoffeeScript 1.9.0 + +/* +paste.js is an interface to read data ( text / image ) from clipboard in different browsers. It also contains several hacks. + +https://github.com/layerssss/paste.js + */ + +(function() { + var $, Paste, createHiddenEditable, dataURLtoBlob; + + $ = window.jQuery; + + $.paste = function(pasteContainer) { + var pm; + if (typeof console !== "undefined" && console !== null) { + console.log("DEPRECATED: This method is deprecated. Please use $.fn.pastableNonInputable() instead."); + } + pm = Paste.mountNonInputable(pasteContainer); + return pm._container; + }; + + $.fn.pastableNonInputable = function() { + var el, _i, _len; + for (_i = 0, _len = this.length; _i < _len; _i++) { + el = this[_i]; + Paste.mountNonInputable(el); + } + return this; + }; + + $.fn.pastableTextarea = function() { + var el, _i, _len; + for (_i = 0, _len = this.length; _i < _len; _i++) { + el = this[_i]; + Paste.mountTextarea(el); + } + return this; + }; + + $.fn.pastableContenteditable = function() { + var el, _i, _len; + for (_i = 0, _len = this.length; _i < _len; _i++) { + el = this[_i]; + Paste.mountContenteditable(el); + } + return this; + }; + + dataURLtoBlob = function(dataURL, sliceSize) { + var b64Data, byteArray, byteArrays, byteCharacters, byteNumbers, contentType, i, m, offset, slice, _ref; + if (sliceSize == null) { + sliceSize = 512; + } + if (!(m = dataURL.match(/^data\:([^\;]+)\;base64\,(.+)$/))) { + return null; + } + _ref = m, m = _ref[0], contentType = _ref[1], b64Data = _ref[2]; + byteCharacters = atob(b64Data); + byteArrays = []; + offset = 0; + while (offset < byteCharacters.length) { + slice = byteCharacters.slice(offset, offset + sliceSize); + byteNumbers = new Array(slice.length); + i = 0; + while (i < slice.length) { + byteNumbers[i] = slice.charCodeAt(i); + i++; + } + byteArray = new Uint8Array(byteNumbers); + byteArrays.push(byteArray); + offset += sliceSize; + } + return new Blob(byteArrays, { + type: contentType + }); + }; + + createHiddenEditable = function() { + return $(document.createElement('div')).attr('contenteditable', true).css({ + width: 1, + height: 1, + position: 'fixed', + left: -100, + overflow: 'hidden' + }); + }; + + Paste = (function() { + Paste.prototype._target = null; + + Paste.prototype._container = null; + + Paste.mountNonInputable = function(nonInputable) { + var paste; + paste = new Paste(createHiddenEditable().appendTo(nonInputable), nonInputable); + $(nonInputable).on('click', (function(_this) { + return function() { + return paste._container.focus(); + }; + })(this)); + paste._container.on('focus', (function(_this) { + return function() { + return $(nonInputable).addClass('pastable-focus'); + }; + })(this)); + return paste._container.on('blur', (function(_this) { + return function() { + return $(nonInputable).removeClass('pastable-focus'); + }; + })(this)); + }; + + Paste.mountTextarea = function(textarea) { + var ctlDown, paste; + if (-1 !== navigator.userAgent.toLowerCase().indexOf('chrome')) { + return this.mountContenteditable(textarea); + } + paste = new Paste(createHiddenEditable().insertBefore(textarea), textarea); + ctlDown = false; + $(textarea).on('keyup', function(ev) { + var _ref; + if ((_ref = ev.keyCode) === 17 || _ref === 224) { + return ctlDown = false; + } + }); + $(textarea).on('keydown', function(ev) { + var _ref; + if ((_ref = ev.keyCode) === 17 || _ref === 224) { + ctlDown = true; + } + if (ctlDown && ev.keyCode === 86) { + return paste._container.focus(); + } + }); + $(paste._target).on('pasteImage', (function(_this) { + return function() { + return $(textarea).focus(); + }; + })(this)); + $(paste._target).on('pasteText', (function(_this) { + return function() { + return $(textarea).focus(); + }; + })(this)); + $(textarea).on('focus', (function(_this) { + return function() { + return $(textarea).addClass('pastable-focus'); + }; + })(this)); + return $(textarea).on('blur', (function(_this) { + return function() { + return $(textarea).removeClass('pastable-focus'); + }; + })(this)); + }; + + Paste.mountContenteditable = function(contenteditable) { + var paste; + paste = new Paste(contenteditable, contenteditable); + $(contenteditable).on('focus', (function(_this) { + return function() { + return $(contenteditable).addClass('pastable-focus'); + }; + })(this)); + return $(contenteditable).on('blur', (function(_this) { + return function() { + return $(contenteditable).removeClass('pastable-focus'); + }; + })(this)); + }; + + function Paste(_at__container, _at__target) { + this._container = _at__container; + this._target = _at__target; + this._container = $(this._container); + this._target = $(this._target).addClass('pastable'); + this._container.on('paste', (function(_this) { + return function(ev) { + var clipboardData, file, item, reader, text, _i, _j, _len, _len1, _ref, _ref1, _ref2, _ref3, _results; + if (((_ref = ev.originalEvent) != null ? _ref.clipboardData : void 0) != null) { + clipboardData = ev.originalEvent.clipboardData; + if (clipboardData.items) { + _ref1 = clipboardData.items; + for (_i = 0, _len = _ref1.length; _i < _len; _i++) { + item = _ref1[_i]; + if (item.type.match(/^image\//)) { + reader = new FileReader(); + reader.onload = function(event) { + return _this._handleImage(event.target.result); + }; + reader.readAsDataURL(item.getAsFile()); + } + if (item.type === 'text/plain') { + item.getAsString(function(string) { + return _this._target.trigger('pasteText', { + text: string + }); + }); + } + } + } else { + if (-1 !== Array.prototype.indexOf.call(clipboardData.types, 'text/plain')) { + text = clipboardData.getData('Text'); + _this._target.trigger('pasteText', { + text: text + }); + } + _this._checkImagesInContainer(function(src) { + return _this._handleImage(src); + }); + } + } + if (clipboardData = window.clipboardData) { + if ((_ref2 = (text = clipboardData.getData('Text'))) != null ? _ref2.length : void 0) { + return _this._target.trigger('pasteText', { + text: text + }); + } else { + _ref3 = clipboardData.files; + _results = []; + for (_j = 0, _len1 = _ref3.length; _j < _len1; _j++) { + file = _ref3[_j]; + _this._handleImage(URL.createObjectURL(file)); + _results.push(_this._checkImagesInContainer(function() {})); + } + return _results; + } + } + }; + })(this)); + } + + Paste.prototype._handleImage = function(src) { + var loader; + loader = new Image(); + loader.onload = (function(_this) { + return function() { + var blob, canvas, ctx, dataURL; + canvas = document.createElement('canvas'); + canvas.width = loader.width; + canvas.height = loader.height; + ctx = canvas.getContext('2d'); + ctx.drawImage(loader, 0, 0, canvas.width, canvas.height); + dataURL = null; + try { + dataURL = canvas.toDataURL('image/png'); + blob = dataURLtoBlob(dataURL); + } catch (_error) {} + if (dataURL) { + return _this._target.trigger('pasteImage', { + blob: blob, + dataURL: dataURL, + width: loader.width, + height: loader.height + }); + } + }; + })(this); + return loader.src = src; + }; + + Paste.prototype._checkImagesInContainer = function(cb) { + var img, timespan, _i, _len, _ref; + timespan = Math.floor(1000 * Math.random()); + _ref = this._container.find('img'); + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + img = _ref[_i]; + img["_paste_marked_" + timespan] = true; + } + return setTimeout((function(_this) { + return function() { + var _j, _len1, _ref1, _results; + _ref1 = _this._container.find('img'); + _results = []; + for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) { + img = _ref1[_j]; + if (!img["_paste_marked_" + timespan]) { + cb(img.src); + } + _results.push($(img).remove()); + } + return _results; + }; + })(this), 1); + }; + + return Paste; + + })(); + +}).call(this);