nurularifin's avatar

Failed to load resource the server responded with a status of 404 (Not Found) (Laravel TinyMCE)

Hi everyone, please help me. I got stuck on this step, I want to use TinyMCE for the product description, and I try my best to make it work, and so far it's worked, but I still get an error that says:

Failed to load resource: the server responded with a status of 404 (Not Found) content.css:1 
Failed to load resource: the server responded with a status of 404 (Not Found) emojis.js:1 

and I don't know why that happened, here is what my code looks like in js/app.js:

import './bootstrap';
/** Import tinymce main files */
import 'tinymce/tinymce';
import 'tinymce/skins/ui/oxide/skin';
import 'tinymce/skins/ui/oxide/skin.min.css';
import 'tinymce/skins/ui/oxide/content.css';
import 'tinymce/skins/content/default/content.min.css';
import 'tinymce/skins/content/default/content.css';
import 'tinymce/icons/default/icons';
import 'tinymce/themes/silver/theme';
import 'tinymce/models/dom/model';
/** Import all plugin */
import 'tinymce/plugins/image';
import 'tinymce/plugins/accordion';
import 'tinymce/plugins/advlist';
import 'tinymce/plugins/anchor';
import 'tinymce/plugins/autolink';
import 'tinymce/plugins/autoresize';
import 'tinymce/plugins/autosave';
import 'tinymce/plugins/charmap';
import 'tinymce/plugins/code';
import 'tinymce/plugins/codesample';
import 'tinymce/plugins/directionality';
import 'tinymce/plugins/emoticons';
import 'tinymce/plugins/fullscreen';
import 'tinymce/plugins/help';
import 'tinymce/plugins/importcss';
import 'tinymce/plugins/insertdatetime';
import 'tinymce/plugins/link';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/media';
import 'tinymce/plugins/pagebreak';
import 'tinymce/plugins/preview';
import 'tinymce/plugins/quickbars';
import 'tinymce/plugins/save';
import 'tinymce/plugins/searchreplace';
import 'tinymce/plugins/table';
import 'tinymce/plugins/visualblocks';
import 'tinymce/plugins/visualchars';
import 'tinymce/plugins/wordcount';

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();

window.addEventListener('DOMContentLoaded', () => {
    tinymce.init({
        selector: 'textarea#editor',
        license_key: 'gpl',
        height: 650,
        plugins: [
            'advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview', 'anchor', 'pagebreak',
            'searchreplace', 'wordcount', 'visualblocks', 'code', 'fullscreen', 'insertdatetime', 'media',
            'table', 'emoticons', 'help'
        ],
        toolbar: 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | ' +
            'bullist numlist outdent indent | link image | print preview media fullscreen | ' +
            'forecolor backcolor emoticons | help',
        content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }',
    });

    tinymce.init({
        selector: 'textarea#smalleditor',
        license_key: 'gpl',
        plugins: [
            'lists', 'preview', 'wordcount', 'code', 'fullscreen', 'insertdatetime',
        ],
        toolbar: 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | ' +
            'bullist numlist outdent indent | link image | print preview media fullscreen | ' +
            'forecolor backcolor emoticons | help',
        content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }',
    });
});

as for I use NPM package. For anyone who ever faces the same problem as me or knows what's wrong please help me, I appreciate so much.

All above Import folder and file I've checked and all exist.

0 likes
1 reply
mansoorkhan's avatar

Try this maybe:

/** Import tinymce main files */
import 'tinymce/tinymce';
import 'tinymce/skins/ui/oxide/skin';
import 'tinymce/skins/ui/oxide/content';
import 'tinymce/skins/content/default/content';
import 'tinymce/icons/default/icons';
import 'tinymce/themes/silver/theme';
import 'tinymce/models/dom/model';

/** Import all plugin */
import 'tinymce/plugins/autosave';
import 'tinymce/plugins/autolink';
import 'tinymce/plugins/link';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/table';
import 'tinymce/plugins/autoresize';
import 'tinymce/plugins/preview';
import 'tinymce/plugins/wordcount';

Please or to participate in this conversation.