Tiny Mce 4.0 How to change Background Color and Styles

Posted On // 1 comment

Background

I just downloaded the latest version of TinyMce (4.0) to use it in Asp.Net MVC 4 form.  It was easy to just link the script file by putting link on the page itself. (you should be able to add it to bundle or to layout file too)
http://www.tinymce.com/download/download.php

The default LightGray skin did not really matched with my page style so I downloaded a new skin for it from here. Its minimalist skin from pixabay  http://pixabay.com/en/blog/posts/a-modern-custom-theme-for-tinymce-4-40/


Now , on my page I needed to change the default white color of the editor "on focus" ( and also its width and margin etc).  I tried changing the styles in tinyMCE associated style sheets ( "light" skin style sheets and theme "modern" style sheets) but no use. (Even with applying !important to styles)

Here is what you need to do

$(function () {
 tinymce.init({ selector: '.htmleditor', browser_spellcheck: true, content_css: "@Url.Content("~/Content/Site.css")", statusbar: false, menubar: false, toolbar: "bullist numlist | bold italic underline  | styleselect" });
});
So the magic is content_css property. You need to point it to any of your own custom style sheet. (In my case i have just pointed to my site's main stylesheet). The path is relative from the current page where your textarea resides.

The style in my Site.css for changing background color of TinyMCE editor is
.mce-content-body {
background: #FFFFD4;
}



.mce-content-body {
padding: 5px;
font-size: 14px;
color: #111;
}
No need to add !important

BONUS

Need to move editor left or right or Leave margins in your form , you can use this style though it will only work in Modern browsers
.mce-panel:first-of-type {
margin-left: 130px!important;
width: 75.1%!important;
}

My toolbar was sitting lower with extra space on top of tiny editor. To move it up (making it look like vertical-align:top sort of  thing), you can use this
.mce-flow-layout {
margin-top: -25px!important;
}
Please post comment if it is useful for you, cheers

1 comment: