用tinymce-vue做拉拉-滤清器

Question

我想知道如何在拉拉过滤器中使用tinymce-vue (vue 3) (@tinymce/tinymce-vue ^4.0.4)，但当我单击“确认”以选择我的图像时，filemanager工作得很好：

​

​

我有个错误：

​

​

代码：

​

​

我使用"@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-filemanager："^2.2“(v2.2.0)

希望这份报告对你有一定的价值。

Answer 1

问题是关于点滴参考的。若要使用窗口消息传递，必须将指令发送回父服务器。

在模板中：

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