Laravel 的 @vite('resources/js/app.js') 和 froala 编辑器插件不能一起工作

Question

我在 Laravel 网站中使用基于 Vue.js 的评论系统和收件箱消息系统。我还在我的表单中使用所见即所得编辑器（froala 编辑器）来进行项目上传等，

问题是，如果我将 app.js 资源链接放在我的基础 app.blade.php 文件中，我的 froala 编辑器将无法工作

<script src="{{url("/")}}/assets/bootstrap-5/js/jquery-3.6.1.min.js" data-pagespeed-no-defer   ></script>
<script src="{{asset("assets/bootstrap-5/js/popper.min.js")}}" defer></script>
{{--dasbhoard template's app.js--}}
<script src="{{asset("dashboard/dist/js/app.js")}}"></script>
{{-- including froala scripts files --}}
@include('back.admin.components.froala.footer-scripts-link')
    {{-- app.js for vue app --}}
@vite("resources/js/app.js")


<script src="{{url('/')}}/plugins/select2/dist/js/select2.js" ></script>

<script src="{{url('/')}}/node_modules/compress.js/build/index.js"></script>
<script src="{{url('/')}}/dashboard/dist/js/custom.js"></script>
{{--including froala instance and configuration--}}
@include('back.admin.components.froala.init-and-config')

现在这是我的资产链接的放置方式，我尝试上下移动 @vite("resources/js/app.js") 来修复这个问题，但我的 froala 编辑器仍然无法首先工作，它显示一个错误我在 vue.js 应用程序中使用的 sweetalert2 有一些问题，我跟踪并解决了这个问题，但现在 froala 仍然无法正常工作，并且控制台选项卡中没有错误，编辑器的布局加载完全正常，但功能无法正常工作我已经单击了编辑器工具栏的每个图标和功能，但没有任何效果，而且单击编辑器的任何功能时，控制台中都没有错误，我完全卡在这里，请指导。

我的 package.json 依赖项对象看起来像

"dependencies": {
            "autoprefixer": "^10.4.13",
            "compress.js": "^1.2.2",
            "file-loader": "^6.2.0",
            "jquery": "^3.6.1",
            "laravel-echo": "^1.14.1",
            "moment": "^2.29.4",
            "pusher-js": "^7.4.0",
            "sweetalert2": "^11.6.5",
            "tinymce": "^6.2.0",
            "url-loader": "^4.1.1"
        },

我已使用 npm update 将所有内容更新到最新版本。 我的froala编辑器版本是v4.1.3。 注意：我在 Blade 模板中使用 froala，它不是通过 npm 安装的，也没有在 vue.js 组件中使用

Answer 1

我找到了这个问题的解决方案，我们只需要使用替代的初始化方法而不是

  var editor = new FroalaEditor('#editorArea',{
   //editor options here

    });

我们需要这样做

  document.addEventListener('DOMContentLoaded', function () {
   var editor = new FroalaEditor('#editorArea',{
       //editor options here

     });
     });

它将与 Blade 模板基础文件中包含的 Laravel 的 app.js 完美配合