Looking to Build/Redesign a Website or Blog ?

To speak to Rakshit, call +91 968 704 2303

How to Add/Import CSS File in TinyMCE Editor

Hello Friends,

Couple of days before, I got complain from my client about TinyMCE editor content format. Whatever content entered in TinyMCE editor from admin panel looks fine in Front Page. But Problem is it is not looking good in editor itself. It looks wired in Editor in admin panel.

This looks like frustrating for client as he is not able to see what exactly it looks in front page. I was not aware with this before but once i face this problem, i searched for this how to add css file for editor. I found a way to add css into editor so i added front css into editor in admin panel. so now in editor it looks same as how it looks in front end. Here is a easy way how to add css file in TinyMCE editor.

Write below line of code in Initialization file of TinyMCE editor (tinyMCE.js).

content_css : "css/custom_content.css",

Once you add above line in mentioned file, you can see all class and id names in drop-down menu of styles in editor. Also you can see HTML is now formatted same as Frontend in editor.

Import CSS File in TinyMCE Editor, How to apply css in editor, Add CSS in TinyMCE Editor, Add CSS File in TinyMCE, Stylesheet in TinyMCE, Add Stylesheet in TinyMCE, Add CSS in iFrame.

Thank you!

Share:

2 Comments

  • Hello. I would like the visual editor box in WordPress by TinyMCE to be the same size as my blog’s content column, 480px.
    I added content_css : “css/custom-editor-style.css”,;})(); to tinyMCE.js but nothing changes. Can you tell me where I went wrong?
    Thank you.

  • Hello,
    Please do not add the code “content_css : “css/custom-editor-style.css”,” to the tinyMCE.js page.

    Add this code to that page where you initialize the tinyMCE editor, for example

    ///////////////////////////////
    tinymce.init({
    content_css: “../css/innerpage.css”,
    selector: “textarea”,
    theme: “modern”,
    //////////////////////////////

    May be it will be helpful to you

Leave a Reply

Your email address will not be published.