如何将 tinyMCE 与 Larave + Vite + Vue 项目捆绑

Question

该项目是使用 Laravel 使用 Vite 和 Vue 构建的。 因为我不喜欢使用 Tiny Cloud，所以我尝试将 TinyMCE 集成到我的应用程序包中。

<template>
    <div>
        <textarea ref="editorRef"></textarea>
    </div>
</template>
  
<script lang="ts" setup>
import tinymce from 'tinymce/tinymce';
import 'tinymce/themes/silver/theme';
import 'tinymce/plugins/advlist/plugin';

const { modelValue = "", options = {} } = defineProps({ modelValue: String, options: Object });

interface Emit {
    (e: 'update:modelValue', value: String): void;
}
const emit = defineEmits<Emit>();

const editorRef = ref(null);

onMounted(() => {
    tinymce.init({
        target: editorRef.value,
        plugins: 'advlist',
        toolbar: 'undo redo | bold italic | bullist numlist',
        setup: editor => {
            editor.on('init', () => {
                editor.setContent(modelValue);
            })
            editor.on('change', () => {
                emit("update:modelValue", editor.getContent());
            })
        },
        ...options,
    });
})
</script>

当我运行代码时，出现控制台错误。

Uncaught SyntaxError: Unexpected token '<' (at model.js:1:1) icons.js:1 Uncaught SyntaxError: Unexpected token '<' (at icons.js:1:1)

实际上，它正在发送对

model.js

和

icons.js

的请求。我试图找到系统的哪个部分正在为他们发送请求，但没有找到它。

如果有人让我知道问题是什么以及如何将 TinyMCE 与我的项目捆绑在一起，我将不胜感激。

谢谢！