CODEWITHSUNDEEP
htmlcssckeditor
Francois Girard
Francois Girard

Reputation: 348

Render ckeditor html without editor

I have a CKEditor control for editing html content, then save it. When I finished editing, the ckeditor is hidden and html is rendered in a div. Depending if user can edit or not html, the ckeditor is available or not.

So, the problem is, the css of my webpage is applied to the rendered html. I want the html in my div the same style of when I edit it with ckeditor. Not not the opposite (I don't want to apply my own style to ckeditor).

Can someone help me ?

Edit: The only thing that look like something that can work is that

Upvotes: 0

Views: 2071

Answers (1)

Wizard
Wizard

Reputation: 3151

Inside CKEditor folder, you'll find contents.css. You can use it to have the same style as CKEditor.

  1. Load contents.css in your webpage.
  2. Create a wrapping <div> outside CKEditor html data and give it a class of .cke_editable to use the CSS rules of contents.css.
  3. Make sure not to override any CSS rule of contents.css.

EDIT: Another solution would be:

  1. Make a copy of contents.css, so as to use it separately.
  2. Move all of body rules to .cke_editable rules (put them above the existing .cke_editable rules) and delete body section.
  3. Prefix every other rule with .cke_editable, so as to work only with the contents, so blockquote becomes .cke_editable blockquote.
  4. Tweak the margin setting of .cke_editable from 20px to, let's say, 10px, to account for the margin of the body of your webpage.

Upvotes: 2

Related Questions