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

3 REPLIES 3

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.