将 tinymce-vue 用于 laravel-filemanager

Question

我想知道如何将 tinymce-vue (vue 3) (@tinymce/tinymce-vue ^4.0.4) 与 laravel-filemanager 一起使用文件管理器工作正常，但是当我单击“确认”以 select 我的图像时：

我有一个错误：

在代码中：

我使用 "@tinymce/tinymce-vue": "^4.0.4" (vue 3)

我的组件：

<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 版本：“^8.40” (v8.49.2)
laravel-文件管理器：“^2.2”(v2.2.0)

希望这篇文章对您有所帮助。

Answer 1

问题是关于 tinymce 参考。要使用 window 消息传递，您必须将说明发回给家长。

在模板中：

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

在脚本中：

<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>

将 tinymce-vue 用于 laravel-filemanager

Use tinymce-vue for laravel-filemanager

laravel

vue.js

tinymce

inertiajs