Tiny MCE 4

Adding file browsing capability to Tiny MCE

This example displays all plugins that comes with the TinyMCE package.

To test File Browser click on "Image", "Link" or "Media" toolbar icons and then click on "Browse" icon right after the URL field. From the File Browser popup window select a file with double click or "select" right click option.

To use File Browser with Tiny MCE you must correctly "init" the editor configuring file_browser_callback like in the example below.

<head>
    .......
    <script src="Scripts/tinymce/tinymce.min.js"></script>
    <script>
        tinymce.init({
            selector: "textarea#content",
            theme: "modern",
            height: 300,
            plugins: [
                    "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
                    "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
                    "save table contextmenu directionality emoticons template paste textcolor"
            ],
            content_css: "css/metro-bootstrap.min.css",
            toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons",
            file_browser_callback: function (field, url, type, win) {
                tinyMCE.activeEditor.windowManager.open({
                    url: '/FileBrowser/FileBrowser.aspx?caller=tinymce4&langCode=en&type=' + type,
                    title: 'File Browser',
                    width: 700,
                    height: 500,
                    inline: true,
                    close_previous: false
                }, {
                    window: win,
                    field: field
                });
                return false;
            }

        });
    </script>
    .....
</head>