Snippets

Kevin Bonkewitzz TinyMCE Custom File Picker

Created by Kevin Bonkewitzz
bcc_TinyMCE_Custom_File_Picker
Raw 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!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>

Comments (0)

HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.