Use tinymce-vue for laravel-filemanager

Question

I would like to know how can I use tinymce-vue (vue 3) (@tinymce/tinymce-vue ^4.0.4) with laravel-filemanager The filemanager works fine, but when I click on "confirm" to select my image :

I have an error :

In code :

I use "@tinymce/tinymce-vue": "^4.0.4" (vue 3)

My component :

<template>
    <div>
        <editor
            ref="tinymce"
            name="tinymce"
            class="form-control my-editor"
            api-key="api-key"
            v-model="body"
            :init="{
                path_absolute : '/',
                selector: 'textarea.my-editor',
                relative_urls: 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',
                file_picker_callback : file_picker_callback
            }"
        />
    </div>   
</template>
<script>
import { onMounted, ref } from 'vue';
import Editor from '@tinymce/tinymce-vue';
export default {
    name: 'EventsForm',
    components: {
        Editor
    },
    setup(props, context) {
        onMounted(() => {
            const tinymce = ref(null);
        })

        let file_picker_callback = (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;

            var cmsURL = window.location.origin + '/laravel-filemanager?field_name=' + meta.fieldname;
            if (meta.filetype == 'image') {
                cmsURL = cmsURL + "&type=Images";
            } else {
                cmsURL = cmsURL + "&type=Files";
            }

            tinymce.activeEditor.windowManager.openUrl({
                url: cmsURL,
                title: 'Filemanager',
                width: x * 0.8,
                height: y * 0.8,
                resizable: "yes",
                close_previous: "no"
            });
        }

        return { file_picker_callback }
    }
}
</script>

• Laravel version : "^8.40" (v8.49.2)
• laravel-filemanager : "^2.2" (v2.2.0)

Hopefully this submit has some value to you.

Answer 1

The problem is about tinymce reference. To use the window messaging, you must send instructions back to the parent.

In template :

<template>
<editor :init="conf" api-key="api-key"></editor>
</template>

In script :

<script>
import Editor from "@tinymce/tinymce-vue";

export default {
  name: "App",
  components: {
    editor: Editor,
  },
  data: () => {
    return {
      conf: {
        plugins: "image",
        toolbar: "image",
        file_picker_callback: (cb, v, m) => {
          window.tinymce.activeEditor.windowManager.openUrl({
            url: window.location.href + "dialog.html",
            title: "File Manager",
            onMessage: (api, message) => {
              console.log(message);
              api.close();
              cb(message.data.customField);
            },
          });
        },
      },
    };
  },
};
</script>