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 dropdown 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.

Subscribe to ProgrammingFacts via Email