tinymce editor not loading

Hi all ty in advance

tray to setup tinymce editor in my project

my files are

app.js

/*jshint esversion: 6 */
import "./bootstrap";

import { Alpine, Livewire } from "../../vendor/livewire/livewire/dist/livewire.esm";
import "../../vendor/rappasoft/laravel-livewire-tables/resources/imports/laravel-livewire-tables-all.js";
import Tooltip from "@ryangjchandler/alpine-tooltip";
import Lightbox from "./lightbox";
import "./livewire-sortable";
import * as FilePond from "filepond";
import FilePondPluginFilePoster from "filepond-plugin-file-poster";
import FilePondPluginImagePreview from "filepond-plugin-image-preview";
import FilePondPluginFileValidateType from "filepond-plugin-file-validate-type";
import FilePondPluginFileValidateSize from "filepond-plugin-file-validate-size";
import Splide from "@splidejs/splide";
import AutoAnimate from "@marcreichel/alpine-auto-animate";
import { Html5Qrcode, Html5QrcodeScanner } from "html5-qrcode";
import * as echarts from "echarts";
import AlpineFloatingUI from "@awcodes/alpine-floating-ui";
import Quill from "quill";
import tinymce from 'tinymce';

FilePond.registerPlugin(FilePondPluginFilePoster);
FilePond.registerPlugin(FilePondPluginImagePreview);
FilePond.registerPlugin(FilePondPluginFileValidateType);
FilePond.registerPlugin(FilePondPluginFileValidateSize);

Alpine.plugin(Tooltip);
Alpine.plugin(Lightbox);
Alpine.plugin(AutoAnimate);

window.FilePond = FilePond;
window.Splide = Splide;
window.Html5QrcodeScanner = Html5QrcodeScanner;
window.Html5Qrcode = Html5Qrcode;
window.echarts = echarts;
window.Quill = Quill;
window.tinymce = tinymce;
Livewire.start();

Livewire.hook('request', ({ fail }) => {
    fail(({ status, preventDefault }) => {
        if (status === 419) {
            preventDefault()

            if (confirm("This page has expired.\nWould you like to refresh the page?")) {
                window.location.reload();
            }
        }
    });
});

include blade part


 <x-form-section>
            <x-label>Message</x-label>
            <div class="col-span-2">
                <div>
                    <x-tiny-editor wire:model="message"/>
                    <x-error name="message"/>
                </div>
                <x-error name="message"/>
            </div>
        </x-form-section>

and the blade it self

@props([
    'editorId' => 'tinymceEditor',
    'label' => null,
    'height' => '500px',
    'toolbar' => 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
    'plugins' => 'advlist autolink lists link image charmap print preview anchor searchreplace visualblocks code fullscreen insertdatetime media table paste code help wordcount',
    'placeholder' => '',
])

@push('styles')
    <style>
        .tox-tinymce {
            min-height: 100px;
        }
    </style>
@endpush

<div>
    @if ($label)
        <x-label class="mb-1" for="{{ $editorId }}">{{ $label }}</x-label>
    @endif
    <div wire:ignore>
        <textarea id="{{ $editorId }}" {{ $attributes }}></textarea>
    </div>
</div>

@push('scripts')
    <script>
        // Function to initialize TinyMCE with Livewire support
        function initTinyMCE() {
            if (tinymce.get('{{ $editorId }}')) {
                tinymce.get('{{ $editorId }}').remove();
            }
            tinymce.init({
                selector: '#{{ $editorId }}',
                height: '{{ $height }}',
                plugins: '{{ $plugins }}',
                toolbar: '{{ $toolbar }}',
                setup: function (editor) {
                    // Set content on editor load
                    editor.on('init', function () {
                        editor.setContent(@json($attributes->wire('model')->value()));
                    });

                    // Handle editor content changes and sync with Livewire
                    editor.on('change', function () {
                        @this.set('{{ $attributes->wire('model')->value() }}', editor.getContent());
                    });
                },
                placeholder: '{{ $placeholder }}'
            });
        }

        // Initialize TinyMCE when DOM is ready
        document.addEventListener('DOMContentLoaded', function () {
            initTinyMCE();
        });

        // Reinitialize TinyMCE after any Livewire update
        document.addEventListener('livewire:load', function () {
            Livewire.hook('message.processed', (message, component) => {
                initTinyMCE();
            });
        });
    </script>
@endpush

editor not load just input filed shown

LaryAI

1 year ago

Level 58

To troubleshoot the issue of TinyMCE not loading and only showing an input field, you can follow these steps:

Ensure TinyMCE is Properly Imported: Make sure that TinyMCE is correctly imported in your app.js file. You have already imported it using:
```
import tinymce from 'tinymce';
```
Ensure that this import is correct and that TinyMCE is installed in your project. You can install it via npm if it's not already installed:
```
npm install tinymce
```
Check for JavaScript Errors: Open your browser's developer console and check for any JavaScript errors that might be preventing TinyMCE from initializing. Errors here can provide clues about what's going wrong.
Verify Blade Component Setup: Ensure that your Blade component is correctly set up. The wire:ignore directive is used to prevent Livewire from interfering with the TinyMCE initialization. Make sure this is correctly applied to the textarea.
Ensure Correct Initialization: Double-check the initialization script for TinyMCE. The script should be correctly targeting the textarea by its ID. Ensure that the editorId is unique and matches the ID used in the textarea.
Check Livewire Integration: Ensure that the Livewire integration is correctly set up. The @this.set method should be correctly updating the Livewire model with the editor's content.
Reinitialize on Livewire Updates: The script should reinitialize TinyMCE after Livewire updates. Ensure that the livewire:load and message.processed events are correctly set up to call initTinyMCE().
Debugging Steps:
- Add console logs in the initTinyMCE function to verify that the function is being called.
- Check if the tinymce.init function is being executed and if the editor is being initialized.

Here's a refined version of the script to ensure proper initialization:

@push('scripts')
    <script>
        function initTinyMCE() {
            if (tinymce.get('{{ $editorId }}')) {
                tinymce.get('{{ $editorId }}').remove();
            }
            tinymce.init({
                selector: '#{{ $editorId }}',
                height: '{{ $height }}',
                plugins: '{{ $plugins }}',
                toolbar: '{{ $toolbar }}',
                setup: function (editor) {
                    editor.on('init', function () {
                        editor.setContent(@json($attributes->wire('model')->value()));
                    });

                    editor.on('change', function () {
                        @this.set('{{ $attributes->wire('model')->value() }}', editor.getContent());
                    });
                },
                placeholder: '{{ $placeholder }}'
            });
        }

        document.addEventListener('DOMContentLoaded', function () {
            initTinyMCE();
        });

        document.addEventListener('livewire:load', function () {
            Livewire.hook('message.processed', (message, component) => {
                initTinyMCE();
            });
        });
    </script>
@endpush

If the issue persists, consider isolating the problem by creating a minimal example with just TinyMCE and Livewire to ensure they work together without other dependencies. This can help identify if other parts of your application are causing conflicts.

Please or to participate in this conversation.