Closed
Description
What is the correct configuration with Create React App when loading resources yourself?
I get this so far:
import React from 'react';
import { Editor } from '@tinymce/tinymce-react';
import 'tinymce/tinymce';
import 'tinymce/themes/silver/theme';
import 'tinymce/skins/ui/oxide/skin.min.css'
import 'tinymce/skins/ui/oxide/content.min.css'
import 'tinymce/plugins/link';
import 'tinymce/plugins/code';
const RichTextEditor = () => {
return (
<Editor
initialValue="<p>hello</p>"
init={{
skin=false,
plugins: ['link', 'code'],
toolbar: 'bold italic',
}}
/>
);
};
RichTextEditor.propTypes = {
...Editor.propTypes,
};
export default RichTextEditor;
But I still get
tinymce.js:5320 Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3000/static/js/skins/content/default/content.css".
Also there should be more clarification in documentation that modern theme is only for version 4 and you should use oxide with version 5, because in every part of the documentation, there is theme: modern and took me a while before I figured out that I should use oxide instead.
Metadata
Metadata
Assignees
Labels
No labels
Type
Projects
Milestone
Relationships
Development
No branches or pull requests
Participants
Activity
fyrkant commentedon Feb 25, 2019
You should use the
skin_urlsetting to point to the skin files, importing then into the js file won't work.tomasbruckner commentedon Feb 25, 2019
@fyrkant what do you mean it won't work. I can see that the CSS file is loaded and it works. My only concern is that the component tries to load /static/js/skins/content/default/content.css which is unfortunately redirected due to react router to index.html. Therefore it loads html instead of css and fails. Is there a way to prevent this request to content.css?
fyrkant commentedon Feb 27, 2019
Seems like there is a bug in TinyMCE 5 that is loads the content css even if skin is set to false, we will fix this in a future version but for now I think you can skip loading the content css by setting the
content_csssetting tofalseas well.tomasbruckner commentedon Feb 27, 2019
Great, thank you for quick help.
realrickren commentedon Jul 9, 2020
This bug havent been fixed yet? I met this in 5.4.1
conorluddy commentedon Jul 21, 2020
I'm on 5.4.1 also and was struggling with this too, and ended up here.
Setting
skin: falsein my init object seemed to fix it, and I didn't need to setcontent_cssat all.I'm importing my CSS at the top of the component like this, and using the
@tinymce/tinymce-reactcomponent.redfox05 commentedon Aug 3, 2020
skin:falsealso fixed the issue for me with Webpack 4 and TinyMCE 4, and thecontent_cssis set to ourapp.css. I found this solution from https://community.tiny.cloud/communityIdeaDetail?id=08761000000AT6yAAG and then found this github issue when I was trying to see ifskin:falsewas a valid option to use.content.min.cssGET error plone/plone.staticresources#327