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. 

[nellieacos827c]

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

[gokuthekakd799]

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.