The compatibility between Laravel's @vite('resources/js/app.js') and the froala editor plugin seems to be causing issues

I have incorporated a Vue.js based commenting system and inbox messages system in my Laravel website. Additionally, I am utilizing a wysiwyg editor (Froala Editor) in my forms for uploading projects.

The issue I am facing is that the Froala Editor does not work when I include my app.js asset link in my base app.blade.php file.

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

// Additional script tags...

{{--including Froala instance and configuration--}}
@include('back.admin.components.froala.init-and-config')

This is the current placement of my assets links. I have tried moving @vite("resources/js/app.js") up and down to resolve the issue, but the Froala Editor still does not function correctly. Initially, there was an error related to SweetAlert2 used in my Vue.js app, which I resolved. However, now the Froala Editor isn't working without any errors shown in the console. The layout loads fine, but functionality is non-responsive. I have tested each toolbar icon and function, but nothing works as expected. There are no errors displayed in the console upon clicking any editor function. I'm stuck at this point and seeking guidance.

My package.json dependencies object looks like this:

"dependencies": {
            // List of dependencies...
        },

I have ensured all dependencies are updated to the latest versions using npm update. My Froala Editor version is v4.1.3. Note: I am implementing Froala in blade templates, it is not installed via npm and not utilized in Vue.js components.

Answer №1

After some research, I discovered the solution to this issue is to utilize an alternative initialization method rather than

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

    });

We should implement it like this instead

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

     });
     });

This approach will seamlessly integrate with Laravel's app.js included on the blade template base file

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Vue component fails to trigger upon receiving the 'mouseleave' event

I am currently working on a navbar with dynamic component navigation, where hovering over a navbar-link should display the corresponding component and hiding it when the mouse leaves. Although the components are displayed correctly upon hover, they do not ...

What's the best way to handle variables and numerical calculations within PHP loops when dealing with forms?

I'm currently developing a basic PHP page where users can choose how many numbers they want to add together. After selecting the quantity, they input the numbers on a new page, click a button, and then see the sum displayed. The challenge I'm fa ...

I prefer the user not engage with the background when the jQuery dialog is displayed

When a user clicks on an external link, the jQuery UI dialog box will appear with "ok" and "cancel" buttons. Upon clicking "ok," the user should be directed to the external site. Although everything is functioning correctly, there is an issue with the mod ...

What is the best way to modify a particular value buried within a JavaScript object?

Within my node project, I am working with a JavaScript object like the one shown below: that.responseData = { fields: { id: { label: 'ID', value: objectRecord.id, info: '', ex ...

Having trouble navigating back to the homepage

Recently, I started following a tutorial on YouTube to create a basic frontend in React with Bootstrap. However, I encountered a roadblock while trying to implement a specific functionality. The issue stemmed from the fact that react-router-dom v6 no lon ...

Limiting the dropdown results in v-autocomplete: A simple guide

Image Link After receiving 100-200 results from the axios api, I am looking for a way to display only the first 10 items. However, I also need to show the total count of all items retrieved. Unfortunately, this cannot be achieved directly from the api call ...

Unique version: "Each tab uses a unique pagination system that ultimately leads to the same content

Apologies for the novice question. Currently, I have: • a webpage with different tabs, each containing a pagination The issue arises when clicking on a page in one pagination, it redirects to: • a different tab For example, clicking on page 2 in t ...

Guidance that utilizes the scope of a specific instance

I have successfully created a d3.js directive, but I am facing an issue when resizing the window. The values of my first directive seem to be taking on the values of my second directive. How can I separate the two in order to resize them correctly? (both ...

A guide to submitting forms within Stepper components in Angular 4 Material

Struggling to figure out how to submit form data within the Angular Material stepper? I've been referencing the example on the angular material website here, but haven't found a solution through my own research. <mat-horizontal-stepper [linea ...

What is the best method to retrieve the nested value in this JavaScript/HTML code?

Can anyone help me extract the value "Yes, I am a Speaker" from this code using Javascript DOM element with getElementById? The challenge is that the value is nested inside a list element without any specific attributes. Each block of code has a unique l ...

iOS app launch does not trigger Phonegap handleOpenURL

Receiving an alert message when the app is open in the background. However, when I close the app from the background and then relaunch it, the alert message doesn't appear. The handleOpenURL function cannot be invoked in JavaScript when the app is lau ...

What is the correct way to position a material-ui icon within a button for proper alignment?

Is there a way to properly align the <ChevronRightIcon> within the <PrimaryButton>? I want it to appear after the button label on the right side. https://i.stack.imgur.com/dcEWo.png <PrimaryButton style={{ paddingRight: &apo ...

Setting default values in Vuejs from browser URL parameters

I found a URL link that directs to different cities: Below is the Vue template code: <template> <ul> <li v-for="city in states" :key="city.id" :id="city.id" v-bi ...

Executing JavaScript functions externally from the Angular 6 application

I have a unique scenario where my angular 6 app is embedded within another application that injects JavaScript to the browser to expose specific functionalities to the angular app. For example, when running my angular app within this external application, ...

Vuetify alters the text color of the <vs-button> element

Outline of the Issue Upon installing vuetify, the text color of my <vs-button> has changed from white to black. Despite trying to adjust the color in the vuetify theme, I am unable to change it back. I have also created a custom filter rule using po ...

The text-center alignment in Bootstrap doesn't seem to be applying to buttons

After spending a considerable amount of time trying to center two buttons in Bootstrap, I came across the "text-center" class offered by Bootstrap. However, no matter where I include this class, it doesn't seem to have any effect on the alignment of t ...

Here is a helpful guide on updating dropdown values in real time by retrieving data from an SQL database

This feature allows users to select a package category from a dropdown menu. For example, selecting "Unifi" will display only Unifi packages, while selecting "Streamyx" will show only Streamyx packages. However, if I first select Unifi and then change to S ...

Adding express.js to a Pre-existing vue.js/webpack Setup

Can express.js be added to an existing vue.js/webpack project that currently only uses node.js without a framework? If the vue.js project is created at the root folder level, can a sub-folder be added at the root level for the express.js files? Will this ...

What is the best way to locate this particular element on the webpage?

After using the right-click and selecting inspect element, I located the code of the desired element on the webpage: <input type="text" ng-if="!editing" ng-model="item.Price" ng-click="inputFocus()" ts="" required="" placeholder="قیمت :" class="ng- ...

Encountering issues with formData in nextjs 13 due to incorrect data type

In my NextJS application, I am using the dataForm method to retrieve the values from a form's fields: export async function getDataForm(formData) { const bodyQuery = { ....... skip: formData.get("gridSkip") ...