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

Switch up text using jQuery on css-tricks.com

I am having trouble with the code I found on a page about toggling text using jQuery from this link. Could someone please explain to me the significance of ':visible'? Thank you. Here is the fiddle link, and below is the code that I copied. Vi ...

jqueryhtmlcss

Preventing event propagation in jQuery's click handler

Is it possible to prevent the propagation of a click event on a dynamically created div within its parent div? HTML <div id = "parent"> Some Stuff </div> Jquery $('#parent').click(function(){ $(this).append('<div class = ...

javascriptjquery

Removing sourceMappingURL from an Angular Universal build: A step-by-step guide

Using this repository as my foundation, I have successfully resolved most of the plugin errors except for one that continues to elude me. It's puzzling because no other plugin anticipates a .map file in an SSR build since it is intended for productio ...

javascriptangularangular-universalserver-side-rendering

Selenium-webdriver is having trouble locating an element through the CSS selector

I encountered an issue while using selenium-webdriver in JavaScript to input a value into a field. Here is my test.js code: async () => { let driver = await new webdriver.Builder().forBrowser("chrome").build(); try { await driver.get("http://te ...

javascriptseleniumselenium-webdriver

What sets $(document).on apart from ($ document).on in CoffeeScript?

One of my buddies is incorporating ($ document).on into his CoffeeScript script. I'm curious to know if this differs from the typical $(document).on and, if it does, how so? ...

javascriptjquerycoffeescriptdomdocument

Transfer all image files from Node.js to the frontend

What is the best way to send all image files from my backend nodejs server folder to my Reactjs client? I have set up a website where users can sign in and upload their files. However, I am facing an issue where only one file is visible on the client side, ...

javascriptnode.jsreactjsexpress

I am interested in sharing photos by posting them on the public folder link and incorporating them into a React app

Just finished building my react portfolio website and now I'm looking to share it for free using platforms like Github Pages or other similar options. The only issue is that I have a few things to consider - my public folder with project images and al ...

reactjsgithubdeploymentweb-deploymentgithub-pages

Sending parameters with $location.path() in AngularJS

Having trouble creating a redirection call in the controller with a numerical parameter. Here is the code I've been using: $location.path('/tasklist/:$rootScope.job_id'); I have also attempted the following: $location.path("/tasklist/",$r ...

javascriptangularjsangularjs-directivelocation

There seems to be an issue with the visibility of the b-button within the b-table component in

I'm new to Vue Js and I'm having trouble with my b-button not displaying in my table. I can't figure out why. Below is my HTML code: <div id="listlocales"> <div class="overflow-auto"> ...

javascriptpythonhtmldjangovue.js

Retrieve the output of a function once the function has completed

I'm facing an issue where I need to wait for a function to return a value from my MySQL table before using it as a return for my const ProjektNameIntentHandler. Here is the relevant code snippet: const ProjektNameIntentHandler = { canHandle(handlerIn ...

javascriptnode.jsjsonalexa-skills-kit

The NextJS homepage and API endpoint are combined on a single page

In my Next.js application, I have multiple pages and I want the component loaded at http://localhost:3000/someEndpoint to be exactly the same as the one loaded at http://localhost:3000/ I have already created an index.js file, but I am unsure how to creat ...

javascriptnext.js

Why does Typescript not enforce a specific return type for my function?

In my custom Factory function, I need to return a specific type: type Factory<T> = () => T; interface Widget { creationTime: number; } const createWidget: Factory<Widget> = () => { return { creationTime: Date.now(), foo: &a ...

javascripttypescript

The coordinates of the event do not match the coordinates of the location. Successful AJAX response data

How can I retrieve the accurate latitude and longitude when the Google Maps marker finishes dragging? It's confusing because for the same exact point, two different (but very approximate) coordinates are provided. Here are some example results for t ...

javascriptjqueryajaxgoogle-maps

The minmax() function in a responsive grid layout does not function properly when incorporating grid areas

My Vision for the Layout I am striving to create a dynamic grid structure with three columns and two rows, where the third column spans both rows and features an image. This layout should adjust itself based on the device screen size: Specifically, I wou ...

csslayoutresponsive-designcss-grid

How can I position a vertically centered image to the left of a block paragraph using inline styles?

I am faced with the challenge of aligning a 100x100 vertically-centered image to the left of a text block that extends beyond its height. It is important that the text does not wrap underneath the image but stays in a single block on the right side. I must ...

htmlcssimagepositioninginline-styles

What is the purpose of the 'onClassExtended' function in Extjs 6 for class definition?

Ext.define('Algorithm.data.Simulated', { needs: [ //.... ], onClassExtended: function(obj, info) { // .... } }) I came across this code snippet but couldn't locate any official documentation for it on Sencha ...

javascriptextjs

Is the && operator being utilized as a conditional statement?

While following a tutorial, I came across this code snippet that uses the 'and' operator in an unusual way. Is this related to React? Can someone provide an explanation or share documentation that clarifies it? {basket?.length > 0 && ...

javascriptreactjs

Is there a way to receive a JSON request in Express delete using Restangular?

Below is the Restangular code that I am using for deleting an object: $scope.delO = (id){ Restangular .one("footer", id) .get() .then((ob) => { ob.remove(); } .catch.... } The deletion request is being successfully sent, co ...

javascriptnode.jsexpressrestangular

Is Material-UI transitioning to a new Reactjs hook?

Most tutorials on creating reactJS websites showcase examples like this: const NavBar = (params) => { return( <div> text </div> ) } export default NavBar; However, material-UI introduces a different approach ...

reactjsmaterial-ui

Adjusting the height of a SelectField in ReactJS with MaterialUI

I have incorporated the React material-ui SelectField component into my webpage. Unfortunately, I am facing difficulty in adjusting the height of the select field. Below is a snippet of my code: <SelectField underlineStyle={{ display: 'none&a ...

reactjsreact-nativereact-routermaterial-ui