Skip to content

Instantly share code, notes, and snippets.

@danielflippance
Last active November 4, 2022 18:18
Show Gist options
  • Save danielflippance/e1599fd58ada73b56bfb to your computer and use it in GitHub Desktop.
Save danielflippance/e1599fd58ada73b56bfb to your computer and use it in GitHub Desktop.
TinyMCE with Plupload Image Selector
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script src="/plupload-2.1.2/js/plupload.full.min.js"></script>
<script src="/jquery-1.10.1/js/jquery-1.10.1.min.js"></script>
<script src="//tinymce.cachefly.net/4.1/tinymce.min.js"></script>
<script>
//Some code from - http://www.bennadel.com/blog/2564-using-multiple-dropzones-and-file-inputs-with-a-single-plupload-instance.htm
var PluploadHandler = function( $, plupload ) {
var self = this;
this.plupload = plupload;
// Custom example logic
this.uploader = new plupload.Uploader({
runtimes : 'html5,flash,silverlight,html4',
browse_button : document.getElementById('mybutton'),
url : '/path/to/upload/the/image',
flash_swf_url : '/plupload-2.1.2/js/Moxie.swf',
silverlight_xap_url : '/plupload-2.1.2/js/Moxie.xap',
drop_element : "dropFilesHere",
filters : {
max_file_size : '10mb',
mime_types: [
{title : "Image files", extensions : "jpg,jpeg,gif,png"}
]
},
init: {
PostInit: function() {
$('.filelist').html('');
},
Error: function(up, err) {
console.log("\nError #" + err.code + ": " + err.message);
}
}
});
this.uploader.init();
this.uploader.bind("FilesAdded", handlePluploadFilesAdded);
this.uploader.bind("FileUploaded", handlePluploadFileUploaded);
function handlePluploadFilesAdded(up, files) {
console.log("+ handlePluploadFilesAdded");
up.start();
}
function handlePluploadFileUploaded(up, file, res) {
console.log("++ res.response: " + JSON.stringify(res.response));
var img = "<img src='" + res.response + "?" + Date.now() + "'>";
tinymce.activeEditor.execCommand('mceInsertContent', false, img);
}
}
</script>
<script>
function initTinymce() {
tinymce.remove('.use-tinymce');
tinymce.init({selector:'.use-tinymce',
plugins: "code link visualblocks",
height: 200,
menubar: false,
resize: true,
statusbar: true,
extended_valid_elements : "span[!class]",
toolbar: "undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link code mybutton",
visualblocks_default_state: true,
setup: function(editor) {
editor.addButton('mybutton', {
type: 'button',
title: 'Insert image',
icon: 'image',
id: 'mybutton'
});
editor.on('init', function(e) {
var pluploadHandler = new PluploadHandler(jQuery, plupload, 'html', 800 );
});
}
});
}
initTinymce();
</script>
</head>
<body>
<h1>TinyMCE with Plupload Image Selector</h1>
<div class='edit-container'>
<textarea id="tinymceTextarea" class="use-tinymce"></textarea>
<button class="btn btn-success save">Save</button>
</div>
</body>
</html>
@ayaka209
Copy link

ayaka209 commented Jun 5, 2015

Very useful, Thank you!!

@ostretsov
Copy link

@JessicaPuebla
Copy link

I get this plupload is not defined

@prgdes
Copy link

prgdes commented Oct 11, 2017

hi , tanks for your code , if maybe share your uploadhandler.ashx or any more help .
i cant submit my form & unuploaded file .

@prgdes
Copy link

prgdes commented Oct 12, 2017

its better to clear
drop_element: "dropFilesHere",
of your code . please try . i'm done and worked for me.

@prgdes
Copy link

prgdes commented Oct 12, 2017

but yet 'res.response ' returned null value!
any ideas on what i can do to get this going?
i need url for tinymce.activerditor to save img within 'src' attribute .

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment