Last active
November 4, 2022 18:18
-
-
Save danielflippance/e1599fd58ada73b56bfb to your computer and use it in GitHub Desktop.
TinyMCE with Plupload Image Selector
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
| <!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> |
I get this plupload is not defined
hi , tanks for your code , if maybe share your uploadhandler.ashx or any more help .
i cant submit my form & unuploaded file .
its better to clear
drop_element: "dropFilesHere",
of your code . please try . i'm done and worked for me.
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
Very useful, Thank you!!