laravel-filemanager does not seems to be working on tinyMCE 5

[furatamasensei]

I don't know if this is a bug/not yet supported feature from laravel-filemanager or the tinyMCE 5 it self but I just want to make sure. I'm trying to integrate this package (version 1.8) using tinyMCE 5 but it seems to be not working.

[mdhosseini]

Hello i have same error i use file_piker_callback but it's not work and have some error abot body and other in js please help me

[ukrosoft]

Hello! We have the same problem. tinyMCE 5 + Laravel File Manager 1.8 doesn't work.

[charitablehumans]

Same issue for me as well.

[naruepat]

I have same issue. how i want to fixed it?

Failed path: (dialog)
Could not find valid *strict* value for "body" in {
  "url": "http://localhost:3000/laravel-filemanager?type=Images",
  "width": 320,
  "height": 240,
  "title": "Filemanager"
},Failed path: (dialog)
Could not find valid *strict* value for "buttons" in {
  "url": "http://localhost:3000/laravel-filemanager?type=Images",
  "width": 320,
  "height": 240,
  "title": "Filemanager"
}

Input object: {
  "url": "http://localhost:3000/laravel-filemanager?type=Images",
  "width": 320,
  "height": 240,
  "title": "Filemanager"
}

[BAKTETE]

i've tried every possible way been busy for 3 days to figure a solution out but no luck came across this pull : https://github.com/tinymce/tinymce/issues/4786

hope if it will help someone make it work using iframe

[ghost]

Hello! Sorry for my English.

Here is a quick fix.

1. Upgrade Tinymce to 5.0.4.
2. Execute the following command if you have not previously executed: php artisan vendor:publish --tag=lfm_view
3. In the "resources/views/vendor/laravel-filemanager/index.php" replace the {!! \File::get(base_path('vendor/unisharp/laravel-filemanager/public/js/script.js')) !!} to {!! \File::get(resource_path('assets/vendor/laravel-filemanager/script.js')) !!}
4. Copy the "vendor/unisharp/laravel-filemanager/public/js/script.js" to "resources/assets/vendor/laravel-filemanager/script.js".
5. Open the "resources/assets/vendor/laravel-filemanager/script.js" and after function "useTinymce3" insert the follow code:

function useTinymce5(url) {
    parent.postMessage({
      mceAction: 'insert',
      content: url
    });
    
    parent.postMessage({ mceAction: 'close' });
  }

Then replace it:

if (window.opener || window.tinyMCEPopup || field_name || getUrlParam('CKEditorCleanUpFuncNum') || is_ckeditor)

to:

if ('tinymce5' === getUrlParam('editor')) {
      useTinymce5(url);
  } else if (window.opener || window.tinyMCEPopup || field_name || getUrlParam('CKEditorCleanUpFuncNum') || is_ckeditor)

6. Config the Tinymce (https://unisharp.github.io/laravel-filemanager/integration):

var editor_config = {
    // ...
    file_picker_callback: function (callback, value, meta) {
        let x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
        let y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight;

        let type = 'image' === meta.filetype ? 'Images' : 'Files',
            url  = editor_config.path_absolute + 'laravel-filemanager?editor=tinymce5&type=' + type;

        tinymce.activeEditor.windowManager.openUrl({
            url : url,
            title : 'Filemanager',
            width : x * 0.8,
            height : y * 0.8,
            onMessage: (api, message) => {
                callback(message.content);
            }
        });
    }
};

[BAKTETE]

is it secure calling url = editor_config.path_absolute + 'laravel-filemanager?editor=tinymce5&type=' + type; without token

[ghost]

Yes. About the "token" in the documentation nothing says.

P.S. If you need to protect routes, assign them middleware.

[ualexzt]

The file manager does not open. All items fulfilled. What could be the problem?

[ghost]

Does the browser console display any errors?

[BAKTETE]

Download TinyMCE Community from here link

[tursunbaevz]

Does the browser console display any errors?

When i open filemanager everything is working, but after uploading file and clicking to image its shows me image popup in another page, but not use image ((( , How too fix that?

[dima2306]

Hello! Sorry for my English.

Here is a quick fix.

1. Upgrade Tinymce to 5.0.4.

2. Execute the following command if you have not previously executed:
   `php artisan vendor:publish --tag=lfm_view`

3. In the "resources/views/vendor/laravel-filemanager/index.php" replace the
   `{!! \File::get(base_path('vendor/unisharp/laravel-filemanager/public/js/script.js')) !!}`
   to
   `{!! \File::get(resource_path('assets/vendor/laravel-filemanager/script.js')) !!}`

4. Copy the "vendor/unisharp/laravel-filemanager/public/js/script.js" to "resources/assets/vendor/laravel-filemanager/script.js".

5. Open the "resources/assets/vendor/laravel-filemanager/script.js" and after function "useTinymce3" insert the follow code:

function useTinymce5(url) {
    parent.postMessage({
      mceAction: 'insert',
      content: url
    });
    
    parent.postMessage({ mceAction: 'close' });
  }

Then replace it:

if (window.opener || window.tinyMCEPopup || field_name || getUrlParam('CKEditorCleanUpFuncNum') || is_ckeditor)

to:

if ('tinymce5' === getUrlParam('editor')) {
      useTinymce5(url);
  } else if (window.opener || window.tinyMCEPopup || field_name || getUrlParam('CKEditorCleanUpFuncNum') || is_ckeditor)

1. Config the Tinymce (https://unisharp.github.io/laravel-filemanager/integration):

var editor_config = {
    // ...
    file_picker_callback: function (callback, value, meta) {
        let x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
        let y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight;

        let type = 'image' === meta.filetype ? 'Images' : 'Files',
            url  = editor_config.path_absolute + 'laravel-filemanager?editor=tinymce5&type=' + type;

        tinymce.activeEditor.windowManager.openUrl({
            url : url,
            title : 'Filemanager',
            width : x * 0.8,
            height : y * 0.8,
            onMessage: (api, message) => {
                callback(message.content);
            }
        });
    }
};

Yeah, this is definitely working fix and helped me a lot. But as of writing now this is a partial solution, I managed to integrate laravel filemanager with Tinymce v5 but when trying to add image source input was empty and in the console was an error: can't access property "value", parent.document.getElementById(...) is null. This is using useTinymce4AndColorbox() function. So I changed URL parameters to use useTinymce5(). In this case, I got no errors but the source field was empty for some reason. parent.postMessage({ mceAction: 'close' }); Successfully closes the modal but parent.postMessage({ mceAction: 'insert', content: url }); doesn't insert the chosen image URL. After reading TinyMCE docs their API has mceAction: 'insertContent', and mceAction: 'setContent', attributes which does work but places image URL in the editor itself rather than in source field in the modal.

So, I went back to useTinymce4AndColorbox() function and changed a little bit: in script.js parent.document.getElementById(getUrlParam('field_name')).value = url; changed to parent.document.querySelector(`[type="${getUrlParam('field_name')}"]`).value = url;

and in file_picker_callback var cmsURL = window.location.origin + '/laravel-filemanager?field_name=' + meta.fieldname; changed to var cmsURL = window.location.origin + '/laravel-filemanager?field_name=' + 'url';

Hope this will help someone...

If anybody knows a better and elegant solution to this, I'm more than happy to listen!

[jamperkostya]

How it work for me:

I added this code and all work good:

<script>
    tinymce.init({
        selector: 'textarea.my-editor',
        plugins: 'a11ychecker advcode casechange formatpainter linkchecker autolink lists checklist media mediaembed pageembed permanentpen powerpaste table advtable tinycomments tinymcespellchecker image searchreplace wordcount textcolor colorpicker',
        toolbar: 'a11ycheck casechange code formatpainter pageembed permanentpen table image file searchreplace',
        toolbar_mode: 'floating',
        tinycomments_mode: 'embedded',
        tinycomments_author: 'Authorname',
        image_caption: true,
        relative_urls: false,

        file_picker_types: 'file image media',
        file_picker_callback: function (callback, value, meta) {
            let x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
            let y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight;

            let type = 'image' === meta.filetype ? 'Images' : 'Files',
                url  =  '/laravel-filemanager?editor=tinymce5&type=' + type;

            tinymce.activeEditor.windowManager.openUrl({
                url : url,
                title : 'Filemanager',
                width : x * 0.8,
                height : y * 0.8,
                onMessage: (api, message) => {
                    callback(message.content);
                }
            });
        }
    });
</script>