Comments (9)
For TinyMCE 5+ there's no need to include the skin url to include the css. You can import them all in your component:
// Import TinyMCE and theme
import 'tinymce'
import 'tinymce/themes/silver' // was changed from modern to silver
// Import skin
import 'tinymce/skins/ui/oxide/skin.min.css'
import 'tinymce/skins/ui/oxide/content.min.css'
// Import plugins
import 'tinymce/plugins/print'
import 'tinymce/plugins/preview'
...
from tinymce-react.
I'm getting this error:
Refused to apply style from 'URL/static/js/skins/ui/oxide/skin.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Refused to apply style from 'URL/static/js/skins/ui/oxide/content.inline.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Also need to import icons:
import 'tinymce/icons/default';
from tinymce-react.
You have to copy the skin and set the skin_url
in the init config.
from tinymce-react.
I think this is not a good way to go. skin_url
and theme_url
are wrong for this case.
from tinymce-react.
I think this question is related to this: tinymce/tinymce#2836
from tinymce-react.
No I'm pretty sure it's the skin that is missing, I tried setting up a new create-react-app, installed tinymce
and @tinymce/tinymce-react
and copied over the skin with:
cp -r node_modules/tinymce/skins public
Then edited the App.js
file to look like this:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import 'tinymce';
import 'tinymce/themes/modern';
import { Editor } from '@tinymce/tinymce-react';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<Editor
init={{
skin_url: process.env.PUBLIC_URL + '/skins/lightgray'
}}
/>
</div>
);
}
}
export default App;
And it works.
from tinymce-react.
It works. Thanks a lot.
But now I'm wondering if there is a way to "auto-update" those files on every tinymce update. Is there a way to indicate to create-react-app
to copy them?
Or can I import them into my component without using skin_url
, just using something like: import from "tinymce/skinks/lightgray";
?
from tinymce-react.
No you have to do that manually, I'd recommend using Tinymce Cloud if you want an auto updating experience!
from tinymce-react.
In my case, this is how I fixed it:
After adding these lines to index.tsx
,
// Import TinyMCE
import 'tinymce';
// Default icons are required for TinyMCE 5.3 or above
import 'tinymce/icons/default';
// A theme is also required
import 'tinymce/themes/silver';
// Any plugins you want to use has to be imported
import 'tinymce/plugins/advlist';
import 'tinymce/plugins/anchor';
// ... more plugins
I got this message from the console:
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3000/static/js/skins/ui/oxide/skin.min.css".
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3000/static/js/skins/ui/oxide/content.min.css".
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3000/static/js/skins/content/default/content.css".
Then I created a new directory and copied the skins
folder:
mkdir -p public/static/js
cp -r node_modules/tinymce/skins public/static/js
Finally, restarting dev server with npm start
removed the messages. Hope this could be a help for someone in the future.
from tinymce-react.
Related Issues (20)
- Chrome Browser Based Bug and high memory usage after sometime HOT 2
- Useless Image reload triggered at keyup event, when cache is disabled HOT 7
- Uploading images with TinyMCE does not replace the src attribute inside the image tag HOT 5
- Cursor jump back to start when pressed any key in the keyboard. HOT 2
- Uncaught ReferenceError: tinymce is not defined HOT 5
- The editor refreshing anytime i click on other element
- Upload large video more than 100 MB HOT 2
- Selector type doesn't support string in react. HOT 2
- react18 + tinymce/tinymce-react, use image_caption and file_picker_callback HOT 2
- Error TS for use readonly with React JS (Editor) HOT 1
- About this.elementRef.current?.OwnerDocument.DefaultView question HOT 4
- Toolbar Sticky not working properly HOT 6
- Cursor jumps to the start when I start typing HOT 4
- I found a bug while trying to use the Merge Tags feature in "codepen"
- "@tinymce/tinymce-react": "^5.1.0" NOT FIND HOT 3
- Cannot find module '@tinymce/tinymce-react' or its corresponding type declarations HOT 2
- GPL usage not working HOT 1
- [Solved] `licenseKey` is not working as intended but `license_key` did. Test failing on `license_key` HOT 1
- Issue with table border highlighting
- MIME type skin error HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tinymce-react.