<!DOCTYPE html><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title>TinyMCE Custom File Picker</title><!-- Import Bootstrap stylesheet --><linkhref="css/bootstrap.min.css"rel="stylesheet"/><!-- Import scripts --><scriptsrc="js/jquery-3.2.1.min.js"></script><scriptsrc="js/tether.min.js"></script><scriptsrc="js/bootstrap.min.js"></script><scriptsrc="js/tinymce/tinymce.min.js"></script><script>// A variable used to track the active textarea, in case multiple textareas are included on the same page.// - this will store the textarea the image must be included in.varactiveTextArea=null;// Initialize a new TinyMCE textareatinymce.init({selector:".tinymce",// change this to target the appropriate HTML control on your pagesetup:function(editor){// on the setup of the TinyMCE plugin, add a button with the alias 'addImage'editor.addButton('addImage',{text:'Add Image',// the text to display alongside the buttonicon:'image',// the icon to display alongside the buttononclick:function(){activeTextArea=editor;// onclick of this button, set the active textarea to that of which the button was pressed$('#filePicker').modal('show');// show the file picker modal}});},//include buttons on the toolbar of our TinyMCE textarea, notice our new aliased button 'addImage' is includedtoolbar1:'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | addImage'});// when an image is selected, insert the image into the active textarea and then close the modal$(function(){$(".fileSelection img").click(function(e){activeTextArea.insertContent(' <img src="'+$(this).attr("src")+'" /> ');$('#filePicker').modal('hide');});});</script></head><body><!-- Create a new TinyMCE-enabled textarea --><textarearows="12"class="tinymce"></textarea><!-- A Modal with our pictures laid out --><divclass="modal fade"id="filePicker"tabindex="-1"role="dialog"aria-labelledby="lblFilePicker"aria-hidden="true"><divclass="modal-dialog"role="document"><divclass="modal-content"><!-- Modal Heading amd Close Button --><divclass="modal-header"><h5class="modal-title"id="lblFilePicker">Please Select an Image</h5><buttontype="button"class="close"data-dismiss="modal"aria-label="Close"><spanaria-hidden="true">×</span></button></div><!-- Modal Content - Your images will go here. This is also a good place to include an upload form. --><divclass="modal-body fileSelection"><imgsrc="image1.jpg"/><imgsrc="image2.jpg"/><imgsrc="image3.jpg"/></div></div><!-- /end of modal-content --></div><!-- /end of modal-dialog --></div><!-- /end of modal --></body></html>
Comments (0)
HTTPSSSH
You can clone a snippet to your computer for local editing.
Learn more.