Vite: ?inline not working as expected when loading css for TinyMCE

Akshit Arora 0
Viewed 40

I am implementing self hosted TinyMCE in my application.

I am referring this link for the implementation. Here is my code

/* TinyMCE scripts loading here. All good! */
import contentUiCss from 'tinymce/skins/ui/oxide/content.css?inline';
import contentCss from 'tinymce/skins/content/default/content.css?inline';

tinymce.init({
    selector: '#my_text_area',
    inline: true,
    menubar: false,
    toolbar: 'undo redo | bold italic underline | alignleft aligncenter alignright',
    placeholder: 'Write your text here',
    skin: false, // skin is loaded manually above as an import
    content_css: false, // loaded manually directly below
    content_style: [contentCss, contentUiCss].join('\n'),
});

The contents from content.css and contentUiCss are also getting injected in my <head> section which is causing the css conflicts.

As per the fix of Vite, it should not happen this way. Where am I getting wrong?

Vite version: 3.1.0

PS: Tried with ?raw as well but no luck!

tinymce vite laravel
1 Answers

Found the solution.

This is not because of Vite but because of TinyMCE. As per the documentation of TinyMCE

In inline mode, it (CSS provided) is injected into the head of the page TinyMCE is rendered in.

Fix for this:

You do not need tinymce/skins/content/default/content.css. The code works perfectly fine even without it (At least as of now)

For the other one, we have a file in the oxide folder for inline mode: tinymce/skins/ui/oxide/content.inline.css

So, the updated working code is:

import contentUiCss from 'tinymce/skins/ui/oxide/content.inline.css?inline';

tinymce.init({
    selector: '#my_text_area',
    inline: true,
    menubar: false,
    toolbar: 'undo redo | bold italic underline | alignleft aligncenter alignright',
    placeholder: 'Write your text here',
    skin: false, // skin is loaded manually above as an import
    content_css: false, // loaded manually directly below
    content_style: contentUiCss,
});

And it's all good to go!

Hope it helps someone! :)

Akshit Arora0
Related