Created
April 14, 2014 07:18
-
-
Save arsalanshah/10623688 to your computer and use it in GitHub Desktop.
bdesk_photo/plugin.min.js (no restriction )
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
/** | |
* Buddyexpress Desk | |
* | |
* @package Bdesk | |
* @author Buddyexpress Core Team <[email protected] | |
* @copyright 2014 BUDDYEXPRESS NETWORKS. | |
* @license Buddyexpress Public License http://www.buddyexpress.net/Licences/bpl/ | |
* @link http://labs.buddyexpress.net/bdesk.b | |
*/ | |
tinymce.PluginManager.add("bdesk_photo", function (editor, f) { | |
/** | |
* Setup buttons for Bdesk Editor | |
* @lastchange: $arsalanshah | |
*/ | |
editor.addButton("bdesk_photo", { | |
icon: 'image', | |
title: 'Image Embed Upload', | |
cmd: "bdesk_photo" | |
}); | |
/** | |
* Init the plugin | |
* @lastchange $arsalanshah | |
*/ | |
editor.addCommand("bdesk_photo", function () { | |
editor.windowManager.open({ | |
//text for dialog | |
title: "Embed a image", | |
width: 450, | |
//location: | |
height: 80, | |
//we need a to put a base64 encode image into texteditor | |
html: '<input type="file" class="input" name="bdesk_image" id="image_embed" style="font-size:14px;padding:30px;" accept="image/x-png, image/gif, image/jpeg"/>', | |
buttons: [{ | |
text: "Insert", | |
subtype: "primary", | |
/** | |
* Triger a OnClick | |
* @lastchange: $arsalanshah | |
*/ | |
onclick: function () { | |
if (window.File && window.FileReader && window.FileList && window.Blob) { | |
var imagefile = document.getElementsByName("bdesk_image")[0].files; | |
var class_filereader = new FileReader(); | |
for (var i = 0, f; f = imagefile[i]; i++) { | |
var filesiz = f.size; | |
} | |
if(filesiz > 512000){ | |
//alert("The image is big in size. The image must be 500KB or less."); | |
//(this).parent().parent().close(); | |
} | |
class_filereader.onload = function (base64) { | |
imgData = base64.target.result; | |
var img = new Image(); | |
img.src = imgData; | |
editor.execCommand("mceInsertContent", false, "<img src='" + imgData + "' />"); | |
}; | |
/** | |
* Log errors | |
* @lastchange: $arsalanshah | |
*/ | |
class_filereader.onerror = function (err) { | |
console.log("error", err); | |
console.log(err.getMessage()); | |
}; | |
if (imagefile.length > 0) { | |
class_filereader.readAsDataURL(imagefile[0]); | |
} | |
else { | |
alert("No File selected"); | |
}} | |
else { | |
alert("Please change your browser to modern one"); | |
} | |
(this).parent().parent().close(); | |
}}, | |
{ | |
text: "Close", | |
onclick: function () { | |
(this).parent().parent().close(); | |
} | |
}], | |
}); | |
}); | |
/** | |
* Setup Insert buttons for Bdesk Editor Dialog | |
* @lastchange: $arsalanshah | |
*/ | |
editor.addMenuItem("bdesk_photo", { | |
cmd: "bdesk_photo", | |
context: "insert", | |
text: 'Embed Image', | |
icon: 'image', | |
}); | |
}); |
Thank you for your help. I had the same issue, and this resolution work fine.
Thank you very much :)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
tinymce was stripping the base64 node, so nothing was being inserted. . If you are experiencing this problem make the following modifications.
1- The insertContent command parses the node and deletes the content. Even mceInsertRawHTML doesn't work because it has the raw parameter turned off, so we need a new command.
After the addButton sentence add the following command to tinymce.
//---------------------------
editor.addCommand("trueInsertRawHTML", function (value) {
this.selection.setContent('tiny_mce_marker');
editor.setContent(
editor.getContent().replace(/tiny_mce_marker/g, function () {
return value;
}), { format: "raw" }
);
});
//-------------------
2- Replace this line:
editor.execCommand("mceInsertContent", false, "");
With:
editor.execCommand("trueInsertRawHTML", "");
Hope this helps the next customer...