提问人：Zeeshan Awan 提问时间：11/12/2023 最后编辑：Zeeshan Awan 更新时间：11/16/2023 访问量：70
Laravel 的 @vite（'resources/js/app.js'） 和 froala 编辑器插件无法协同工作
Laravel's @vite('resources/js/app.js') and froala editor plugin won't work together
问：
我在我的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。 注意：我在刀片模板中使用 froala，它不是通过 npm 安装的，而是在 vue.js 组件中使用
答：
0赞
Zeeshan Awan
11/15/2023
#1
我找到了这个问题的解决方案，我们只需要使用替代的初始化方法而不是
var editor = new FroalaEditor('#editorArea',{
//editor options here
});
我们需要这样做
document.addEventListener('DOMContentLoaded', function () {
var editor = new FroalaEditor('#editorArea',{
//editor options here
});
});
它将与刀片模板基础文件中包含的 Laravel 的 app.js 完美配合
评论