Rendering HTML edited by TinyMCE

Question

I'm using the tinymce editor in a web page. When the user clicks the save button after editing, I'm getting the content from the editor and set them in a div as html (fiddle).

The problem is the content shown after saving is different from how it shows in the editor.

The content at the top of the image (edit view) and the bottom of the image (how user sees after editing) should be the same.

The reason for this is the two parts using different css. Anybody knows a way to fix this?

Answer 1

When you call TinyMCE you can specify the CSS it should use.

tinymce.init({
  selector:'textarea',
  content_css: '/css/style.css'
});

Docs at http://www.tinymce.com/wiki.php/Configuration:content_css

Edit in response to comment

In your CSS file you can set specify styles for TinyMCE as below:

#tinymce ul {
    list-style-type: decimal;
}

Answer 2

You need to change the content.css file in the themes folder of tinymce to match what's displayed on your front end site.

http://www.tinymce.com/wiki.php/Configuration:content_css