-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Temporarily prevent drag-n-drop of images into the editor until PR mybb#4359 is updated and included in 1.9.
- Loading branch information
Showing
4 changed files
with
228 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,222 @@ | ||
/** | ||
* SCEditor Drag and Drop Plugin | ||
* http://www.sceditor.com/ | ||
* | ||
* Copyright (C) 2017, Sam Clarke (samclarke.com) | ||
* | ||
* SCEditor is licensed under the MIT license: | ||
* http://www.opensource.org/licenses/mit-license.php | ||
* | ||
* @author Sam Clarke | ||
*/ | ||
(function (sceditor) { | ||
'use strict'; | ||
|
||
/** | ||
* Place holder GIF shown while image is loading. | ||
* @type {string} | ||
* @private | ||
*/ | ||
var loadingGif = 'data:image/gif;base64,R0lGODlhlgBkAPABAH19ffb29iH5BAAK' + | ||
'AAAAIf4aQ3JlYXRlZCB3aXRoIGFqYXhsb2FkLmluZm8AIf8LTkVUU0NBUEUyLjADAQA' + | ||
'AACwAAAAAlgBkAAAC1YyPqcvtD6OctNqLs968+w+G4kiW5omm6sq27gvH8kzX9o3n+s' + | ||
'73/g8MCofEovGITCqXzKbzCY1Kp9Sq9YrNarfcrvcLDovH5LL5jE6r1+y2+w2Py+f0u' + | ||
'v2OvwD2fP6iD/gH6Pc2GIhg2JeQSNjGuLf4GMlYKIloefAIUEl52ZmJyaY5mUhqyFnq' + | ||
'mQr6KRoaMKp66hbLumpQ69oK+5qrOyg4a6qYV2x8jJysvMzc7PwMHS09TV1tfY2drb3' + | ||
'N3e39DR4uPk5ebn6Onq6+zt7u/g4fL99UAAAh+QQACgAAACwAAAAAlgBkAIEAAAB9fX' + | ||
'329vYAAAAC3JSPqcvtD6OctNqLs968+w+G4kiW5omm6sq27gvH8kzX9o3n+s73/g8MC' + | ||
'ofEovGITCqXzKbzCY1Kp9Sq9YrNarfcrvcLDovH5LL5jE6r1+y2+w2Py+f0uv2OvwD2' + | ||
'fP4iABgY+CcoCNeHuJdQyLjIaOiWiOj4CEhZ+SbZd/nI2RipqYhQOThKGpAZCuBZyAr' + | ||
'ZprpqSupaCqtaazmLCRqai7rb2av5W5wqSShcm8fc7PwMHS09TV1tfY2drb3N3e39DR' + | ||
'4uPk5ebn6Onq6+zt7u/g4fLz9PX29/j5/vVAAAIfkEAAoAAAAsAAAAAJYAZACBAAAAf' + | ||
'X199vb2AAAAAuCUj6nL7Q+jnLTai7PevPsPhuJIluaJpurKtu4Lx/JM1/aN5/rO9/4P' + | ||
'DAqHxKLxiEwql8ym8wmNSqfUqvWKzWq33K73Cw6Lx+Sy+YxOq9fstvsNj8vn9Lr9jr8' + | ||
'E9nz+AgAYGLjQVwhXiJgguAiYgGjo9tinyCjoKLn3hpmJUGmJsBmguUnpCXCJOZraaX' + | ||
'oKShoJe9DqehCqKlnqiZobuzrbyvuIO8xqKpxIPKlwrPCbBx0tPU1dbX2Nna29zd3t/' + | ||
'Q0eLj5OXm5+jp6uvs7e7v4OHy8/T19vf4+fr7/P379UAAAh+QQACgAAACwAAAAAlgBk' + | ||
'AIEAAAB9fX329vYAAAAC4JSPqcvtD6OctNqLs968+w+G4kiW5omm6sq27gvH8kzX9o3' + | ||
'n+s73/g8MCofEovGITCqXzKbzCY1Kp9Sq9YrNarfcrvcLDovH5LL5jE6r1+y2+w2Py+' + | ||
'f0uv2OvwT2fP6iD7gAMEhICAeImIAYiFDoOPi22KcouZfw6BhZGUBZeYlp6LbJiTD6C' + | ||
'Qqg6Vm6eQqqKtkZ24iaKtrKunpQa9tmmju7Wwu7KFtMi3oYDMzompkHHS09TV1tfY2d' + | ||
'rb3N3e39DR4uPk5ebn6Onq6+zt7u/g4fLz9PX29/j5+vv8/f31QAADs='; | ||
|
||
/** | ||
* Basic check for browser support | ||
* @type {boolean} | ||
* @private | ||
*/ | ||
var isSupported = typeof window.FileReader !== 'undefined'; | ||
var base64DataUri = /data:[^;]+;base64,/i; | ||
|
||
function base64DataUriToBlob(url) { | ||
// 5 is length of "data:" prefix | ||
var mime = url.substr(5, url.indexOf(';') - 5); | ||
var data = atob(url.substr(url.indexOf(',') + 1)); | ||
/* global Uint8Array */ | ||
var binary = new Uint8Array(data.length); | ||
|
||
for (var i = 0; i < data.length; i++) { | ||
binary[i] = data[i].charCodeAt(0); | ||
} | ||
|
||
try { | ||
return new Blob([binary], { type: mime }); | ||
} catch (e) { | ||
return null; | ||
} | ||
} | ||
|
||
sceditor.plugins.dragdrop = function () { | ||
if (!isSupported) { | ||
return; | ||
} | ||
|
||
var base = this; | ||
var opts; | ||
var editor; | ||
var handleFile; | ||
var container; | ||
var cover; | ||
var placeholderId = 0; | ||
|
||
|
||
function hideCover() { | ||
cover.style.display = 'none'; | ||
container.className = container.className.replace(/(^| )dnd( |$)/g, ''); | ||
} | ||
|
||
function showCover() { | ||
if (cover.style.display === 'none') { | ||
cover.style.display = 'block'; | ||
container.className += ' dnd'; | ||
} | ||
} | ||
|
||
function isAllowed(file) { | ||
// FF sets type to application/x-moz-file until it has been dropped | ||
if (file.type !== 'application/x-moz-file' && opts.allowedTypes && | ||
opts.allowedTypes.indexOf(file.type) < 0) { | ||
return false; | ||
} | ||
|
||
return opts.isAllowed ? opts.isAllowed(file) : true; | ||
}; | ||
|
||
function createHolder(toReplace) { | ||
var placeholder = document.createElement('img'); | ||
placeholder.src = loadingGif; | ||
placeholder.className = 'sceditor-ignore'; | ||
placeholder.id = 'sce-dragdrop-' + placeholderId++; | ||
|
||
function replace(html) { | ||
var node = editor | ||
.getBody() | ||
.ownerDocument | ||
.getElementById(placeholder.id); | ||
|
||
if (node) { | ||
if (typeof html === 'string') { | ||
node.insertAdjacentHTML('afterend', html); | ||
} | ||
|
||
node.parentNode.removeChild(node); | ||
} | ||
} | ||
|
||
return function () { | ||
if (toReplace) { | ||
toReplace.parentNode.replaceChild(placeholder, toReplace); | ||
} else { | ||
editor.wysiwygEditorInsertHtml(placeholder.outerHTML); | ||
} | ||
|
||
return { | ||
insert: function (html) { | ||
replace(html); | ||
}, | ||
cancel: replace | ||
}; | ||
}; | ||
} | ||
|
||
function handleDragOver(e) { | ||
var dt = e.dataTransfer; | ||
var files = dt.files.length || !dt.items ? dt.files : dt.items; | ||
|
||
for (var i = 0; i < files.length; i++) { | ||
// Dragging a string should be left to default | ||
if (files[i].kind === 'string') { | ||
return; | ||
} | ||
} | ||
|
||
showCover(); | ||
e.preventDefault(); | ||
} | ||
|
||
function handleDrop(e) { | ||
var dt = e.dataTransfer; | ||
var files = dt.files.length || !dt.items ? dt.files : dt.items; | ||
|
||
hideCover(); | ||
|
||
for (var i = 0; i < files.length; i++) { | ||
// Dragging a string should be left to default | ||
if (files[i].kind === 'string') { | ||
return; | ||
} | ||
|
||
if (isAllowed(files[i])) { | ||
handleFile(files[i], createHolder()); | ||
} | ||
} | ||
|
||
e.preventDefault(); | ||
} | ||
|
||
base.signalReady = function () { | ||
editor = this; | ||
opts = editor.opts.dragdrop || {}; | ||
handleFile = opts.handleFile; | ||
|
||
container = editor.getContentAreaContainer().parentNode; | ||
|
||
cover = container.appendChild(sceditor.dom.parseHTML( | ||
'<div class="sceditor-dnd-cover" style="display: none">' + | ||
'<p>' + editor._('Drop files here') + '</p>' + | ||
'</div>' | ||
).firstChild); | ||
|
||
container.addEventListener('dragover', handleDragOver); | ||
container.addEventListener('dragleave', hideCover); | ||
container.addEventListener('dragend', hideCover); | ||
container.addEventListener('drop', handleDrop); | ||
|
||
editor.getBody().addEventListener('dragover', handleDragOver); | ||
editor.getBody().addEventListener('drop', hideCover); | ||
}; | ||
|
||
base.signalPasteHtml = function (paste) { | ||
if (!('handlePaste' in opts) || opts.handlePaste) { | ||
var div = document.createElement('div'); | ||
div.innerHTML = paste.val; | ||
|
||
var images = div.querySelectorAll('img'); | ||
for (var i = 0; i < images.length; i++) { | ||
var image = images[i]; | ||
|
||
if (base64DataUri.test(image.src)) { | ||
var file = base64DataUriToBlob(image.src); | ||
if (file && isAllowed(file)) { | ||
handleFile(file, createHolder(image)); | ||
} else { | ||
image.parentNode.removeChild(image); | ||
} | ||
} | ||
} | ||
|
||
paste.val = div.innerHTML; | ||
} | ||
}; | ||
}; | ||
})(sceditor); |