Snippet revisions — Bitbucket

+<!DOCTYPE html>

+<html xmlns="http://www.w3.org/1999/xhtml">

+<head>

+    <title>TinyMCE Custom File Picker</title>

+    <!-- Import Bootstrap stylesheet -->

+    <link href="css/bootstrap.min.css" rel="stylesheet" />

+    <!-- Import scripts -->

+    <script src="js/jquery-3.2.1.min.js"></script>

+    <script src="js/tether.min.js"></script>

+    <script src="js/bootstrap.min.js"></script>

+    <script src="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.

+        var activeTextArea = null;

+        // Initialize a new TinyMCE textarea

+        tinymce.init({

+            selector: ".tinymce",  // change this to target the appropriate HTML control on your page

+            setup: 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 button

+                    icon: 'image', // the icon to display alongside the button

+                    onclick: 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 included

+            toolbar1: '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('&nbsp; <img src="' + $(this).attr("src") + '" /> &nbsp;');

+                $('#filePicker').modal('hide');

+            });

+        });

+    </script>

+</head>

+<body>

+    <!-- Create a new TinyMCE-enabled textarea -->

+    <textarea rows="12" class="tinymce"></textarea>

+    <!-- A Modal with our pictures laid out -->

+    <div class="modal fade" id="filePicker" tabindex="-1" role="dialog" aria-labelledby="lblFilePicker" aria-hidden="true">

+        <div class="modal-dialog" role="document">

+            <div class="modal-content">

+                <!-- Modal Heading amd Close Button -->

+                <div class="modal-header">

+                    <h5 class="modal-title" id="lblFilePicker">Please Select an Image</h5>

+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">

+                        <span aria-hidden="true">&times;</span>

+                    </button>

+                </div>

+                <!-- Modal Content - Your images will go here. This is also a good place to include an upload form. -->

+                <div class="modal-body fileSelection">

+                    <img src="image1.jpg" />

+                    <img src="image2.jpg" />

+                    <img src="image3.jpg" />

+                </div>

+            </div> <!-- /end of modal-content -->

+        </div>  <!-- /end of modal-dialog -->

+    </div> <!-- /end of modal -->

+</body>

+</html>

Snippets