Customizing the CSS of the TinyMCE editor within a React application

Incorporating TinyMCE 5 into my React project has been an interesting challenge. I'm looking to personalize the editor by adjusting elements like borders and adding box shadows to the toolbar. Despite attempting to add CSS through the content_css property, I haven't had much luck. Is there a different approach I could take?

edit: This is the desired look I am aiming for here

While I was successful in adding custom icons, tweaking the CSS presents some hurdles. My goal is to reposition the toolbar, incorporate shadow effects, resize icons, and narrow the toolbar width. Even after trying to override CSS using styled-components, I didn't achieve the desired outcome. Are there any alternatives for overriding CSS that I should explore?

javascriptcssreactjstinymce-5

Answer №1

To adjust the toolbar position, simply use toolbar_location: "bottom".

If you wish to customize the CSS, you can either replace the default styles with your own using content_css. For instance:

content_css: "/mycontent.css";

Alternatively, you can modify specific parts of the CSS by using content_style. For example:

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

For further information, check out:

  • Customizing the TinyMCE toolbar
  • content_css & content_style

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dropping and dragging in the Dojo for the nested lists

Within my HTML code, I am using the Dojo drag and drop feature to sort attributes and move them to another section. However, I am having trouble figuring out how to sort the sections themselves. Here is the structure that I have created: <ul accept=" ...

javascripthtmlcssdojodrag-and-drop

Testing a React component that utilizes RouteComponentPropsTesting a React component with RouteComponentProps

One of my components has props that extend RouteComponentProps defined as follows: export interface RouteComponentProps<P> { match: match<P>; location: H.Location; history: H.History; staticContext?: any; } When I use this component i ...

reactjstypescripttestingreact-routerjestjs

"Two vibrant hues in a showdown for dominance over a single pixel on the screen in

When using this Three.js application (), the issue arises where the black wireframe competes with the yellow solid, causing pixel flickering on the screen. Is there a way to prevent this from happening? It's worth noting that the flickering effect is ...

javascriptthree.js

If a React Native module is installed using npm, it may not be found in NativeModules

I have developed a unique Swift project framework that I am working on wrapping in React Native to make it available on npm. After successfully creating the wrapper for iOS and testing its functionality by accessing exposed modules and methods in a new Rea ...

iosreactjsreact-nativenpmreact-native-ios

How does CSS affect the size and performance of a website?

Examining the content of this css file (focusing on the last 5 lines specifically): #page section .s_1 { overflow:hidden; width:435px; float:left;} #page section .s_1 h1 { font-size:36pt; color:#001744; line-height:1.1; margin-bottom:64px;height:107px;} # ...

htmlcssperformance

Struggling with getting basic CSS to work with React's MUI framework

I've been attempting to incorporate basic CSS with MUI components. According to their website, it should be feasible. https://material-ui.com/guides/interoperability/#plain-css But unfortunately, I'm having trouble getting it to function prope ...

cssreactjsmaterial-ui

When I specify the type for the function parameter, an error occurs when I attempt to execute the function

When I assign a generic type to the function parameter and try to call the function, an error message pops up stating "This expression is not callable. Type unknown has no call signature." function a() { return 'abc' } function fun<T>(x: T ...

javascripttypescripttypescript-generics

Do global variables in a node.js server apply across the entire server or exclusively to individual sessions or users?

I have a question that may seem basic, so I apologize in advance - are global variables in node.js applicable server-wide or is their scope limited to the session or user? For example, if I create a global boolean variable in a routes.js file to track whet ...

javascriptnode.jsexpress

Combining Import and Require in a Node JS File

Having some trouble with the normalize-url package. It needs to be imported instead of required since it's not supported in ES module. I tried to work around this by adding some code I found online, but it doesn't seem to be fixing the issue for ...

javascriptnode.jsnpmurl

Turn off base64 encoding for background URLs in the Minify package

When I use the minify tool to compress my js and css files, I noticed that the files containing background:url(...) statements actually increased in size. This happened because the urls were encoded to base64. I tried to disable this base64 encoding featu ...

cssnpmbase64node-modulesminify

What is causing the issue with Next.js Json.map function not functioning correctly?

I am looking to develop a basic component that sources its data from a JSON list. While I am able to see the output of console.log(dat.CardId) on the website, it only works for console.log(). I cannot view the cards rendered by the .map function. The sty ...

javascriptreactjsnext.js

Issue: In an Angular electron app, a ReferenceError is thrown indicating that 'cv' is

I have been working on a face detection app using OpenCv.js within an Angular electron application. To implement this, I decided to utilize the ng-open-cv module from npm modules. However, when attempting to inject the NgOpenCVService into the constructor ...

javascriptangularopencvelectron

Data not displaying correctly after React Query refetch

My React page utilizes React Query to fetch data from a query, manipulate additional data with the fetched results, and present it in a table. If the user modifies a value in a dropdown that contains a context value, the data is re-fetched. The issue ari ...

reactjsreact-query

Fixed navbar at the top changes from absolute positioning to relative when scrolling

My goal is to dynamically change the position of the navbar from fixed to absolute as the user scrolls past 600px. Initially, I used the following code: if (scroll >= 700) { $(".navbar-fixed-top").addClass("navbar-scroll"); } else { $(".navbar ...

jquerycssnavbar

Having trouble getting the Material UI label to change to white on switch?

I'm currently working with a material-ui switch component. Based on my understanding, the code below should modify the label text to appear in white. const PurpleSwitch = withStyles({ label: { color: "white" }, })(Switch); export d ...

reactjsmaterial-ui

Running compiler-produced assembler code within the program

Recently, I came across an interesting presentation discussing inline ASM generation in Javascript optimization. The presentation can be found at the following link: . In another paper located here: https://sites.google.com/site/juliangamble/Home/Compiler ...

javascriptassemblyschemeinline-assemblydynamically-generated

The background image is not showing up

I've been grappling with a CSS background-image dilemma that's got me stumped. Here's the situation: CSS #yes { background-image:url("../tick.png"); background-repeat: no-repeat; height: 16px; width: 16px; }​ #no { backg ...

cssbackground-image

I am experiencing an issue with my localhost website where the images only display after I open the files in VScode. Is there a way to load the images correctly using app.js?

app.js While working on web development in VScode, I've encountered an issue where the images on my localhost website only appear after opening files like home.pug and contact.pug alongside app.js. Is there a way to make the images load properly witho ...

javascripthtmlnode.jsexpresspug

Store the JSON reply as a fixed variable

Recently, I have been delving into ReactJS and I've encountered a challenge of saving a JSON array as a 'const'. I have attempted the following approach: fetch(url) .then(response => response.json()) .then(json => { this.setSt ...

javascriptjsonreactjs

How to Send a JavaScript Array to a JSP Endpoint

I'm in the process of creating a web application that interacts with another website through a JS API. I would like to incorporate an array of JSON objects obtained from this API into my Java Application. Is there any way to submit this array, perhap ...

javascriptarraysjsonjsp