danielflippance/tinymce-plupload.html

## tinymce-plupload.html
<!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>
	<!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>