Vue Media Manager integration with tiny

  javascript, laravel, vue.js

i’m trying to integrate Vue.js Laravel Media Manager with TinyMCE but can’t working well..File Manager opening but unable to to select the file..

tinymce.init({
        selector: 'textarea#basic-example',
        height: 500,
        menubar: false,
        plugins: [
            "advlist autolink lists link image charmap print preview hr anchor pagebreak",
            "searchreplace wordcount visualblocks visualchars code fullscreen",
            "insertdatetime media nonbreaking save table directionality",
            "emoticons template paste textpattern"
        ],
        toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media",
        content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
          
         file_picker_callback: function (callback, value, meta) {
        
                var x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
                var y = window.innerHeight || document.documentElement.clientHeight || document.getElementsByTagName('body')[0].clientHeight;

            let field = win.document.getElementById(field_name)
            $('.__Inmodal-editor').click()

            EventHub.listen('file_selected', (path) => {
                if (field) field.value = path
            })
                tinyMCE.activeEditor.windowManager.openUrl({
                    url: 'http://127.0.0.1:8000/media',
                    title: 'Filemanager',
                    width: x * 0.8,
                    height: y * 0.8,
                    resizable: "yes",
                    close_previous: "no",
                    onMessage: (api, message) => {
                        callback(message.content);
                    }
                });
            }
    });

Demo Code available on Git repository
Package Documentation for Integration Laravel-Media-Manager:

Source: Laravel

Leave a Reply