CODEWITHSUNDEEP
javascriptcssreactjstinymce-5
Divjot Singh
Divjot Singh

Reputation: 93

Overriding CSS of TinyMCE editor in React

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?

Upvotes: 1

Views: 5669

Answers (1)

Ben Long
Ben Long

Reputation: 383

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:

Upvotes: 5

Related Questions