在 React 中覆盖 TinyMCE 编辑器的 CSS

Question

I am using TinyMCE 5 for my React project. I want to customize the editor and I want to do things like for eg: editing border property or adding box shadow to toolbar. I tried adding css using content_css property but it isn't working. Is there any other work around for it?

edit: Here's how I want it to look like in the end here

I was able to add custom icons. Only problem I'm facing is modifying the css. I want to bring the toolbar down, add shadow effect, make icons little smaller and reduce the width of the toolbar. I also tried using styled-components to override CSS but it didn't work. Is there any alternative to override CSS?

Answer 1

You can bring the toolbar down using toolbar_location: "bottom" .

Regarding CSS, you can override the default CSS with your own styles using content_css . For example:

content_css: "/mycontent.css";

Or you can override specific parts of it using content_style . For example:

content_style: "body { font-family: Arial; }";

Also see:

• Customizing the TinyMCE toolbar
• content_css & content_style