cancel
Showing results for 
Search instead for 
Did you mean: 

How to add custom css in TinyMCE?

How to add custom css in TinyMCE?

Hi,

 

I'm trying to build a new page in my onlineshop and it should look like this:

https://codepen.io/Moiety/pen/mbHCx?editors=1100

 

Can you help me where I can add the css styles?

 

I was trying to add them in the XMl section but this was not working Smiley Sad

5 REPLIES 5

Re: How to add custom css in TinyMCE?

TinyMCE disabled the ability to add them outside of the tags, so <style> tags are not valid XHTML, For this you will have to add style tags to the valid children configuration:

valid_children : "+body[style]"
So for Magento, you need to replace the code in lib/web/tiny_mce_4/tinymce.min.js:

to :

p("+ol[ul|ol],+ul[ul|ol]")
with :

p("+ol[ul|ol],+ul[ul|ol],+body[style]")
now run the commands

php bin/magento s:s:d -f

php bin/magento c:f

check-in the below URL: https://www.tiny.cloud/docs-3x//reference/configuration/Configuration3x@valid_children/

NOTE: It will render the CSS in admin, so admin layout will affect as per CSS

If issue solved, Click Kudos & Accept as Solution.
LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool

Re: How to add custom css in TinyMCE?

thx, it seems to complicated for me Smiley Happy

Re: How to add custom css in TinyMCE?

Hey, @caos989

 

I have seen your query. Might this blog be helpful to you. Please refer to this blog: https://magecomp.com/blog/apply-custom-css-for-specific-cms-page-magento-2/

 

From this blog, you can add Custom CSS. 

 

Hope this helps you. 

 

Thank you. 

Re: How to add custom css in TinyMCE?

A lot of information needs to be sifted through, hopefully Omegle online will help you.

Re: How to add custom css in TinyMCE?

To add custom CSS in TinyMCE, you can utilize the content_css option. This option allows you to specify a URL to a CSS file that will be applied to the content within the editor. Additionally, you can use inline styles within your HTML content or apply CSS classes to elements using the style_formats option. By customizing the CSS styles, you can tailor the appearance of your content within the TinyMCE editor to meet your specific design requirements. You can follow up on Fesco website for further solutions.