CODEWITHSUNDEEP
javascriptcsstinymce
Kristiyan Kostadinov
Kristiyan Kostadinov

Reputation: 3712

TinyMCE 4 custom styles

My problem is that i need to apply custom css to tinyMCE, but they just dont get picked up. I've tried replacing the default styles as well as, but it still loads them from somewhere else.

According to their docs I can use "content_css" to apply my custom styles, but that didn't work too.

Any ideas how I can apply the styles?

This is my config:

$(".type").tinymce({
    plugins : 'advlist autolink link lists',
    theme: "modern",
    skin: 'test',
    content_css:"/static/js/general/tinymce/skins/test/custom.css",
    inline:true,
    menubar:false,
});

Upvotes: 1

Views: 2078

Answers (1)

mloureiro
mloureiro

Reputation: 949

I've discovered that using the skin property on the init the skin CSS loaded through there will override local

I'm not sure (haven't tested yet) but like me, you're probably loading the tinymce stuff after on the end of the <body> so the tinymce will load the css files

  • <path-to-tinymce-js>/skins/<your-skin-name>/content.min.css
  • <path-to-tinymce-js>/skins/<your-skin-name>/skin.min.css

Imaging that tinymce js is in assets/tinymcethe files it will load are:

  • assets/tinymce/skins/test/content.min.css
  • assets/tinymce/skins/test/skin.min.css

so these are loaded after the ones defined on <head>

But if everything else fails: I've hard coded the css changes into skin.min.css...

Notice!

I still use the content_css to change css in the <iframe> (example: fonts, background color, ...)

Upvotes: 2

Related Questions