How to add custom css in TinyMCE?

[caos989]

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

[LitCommerce Expert]

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

[caos989]

thx, it seems to complicated for me

[zoyascootg16c3]

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.