if want html authored in ckeditor same inside page, first must insert inside div element custom class, example, "my-container".
then have include contents.css in page. here have alternatives: 1) use scoped stylesheets or 2) modify contents.css, scoping each rule.
1. using scoped stylesheets
in case should use scoped stylesheets , jquery scoped css plugin (due current lack of browser support).
your html code this:
<div class="my-container"> <style scoped> @import "ckeditor/contents.css"; </style> <!-- html goes here --> </div>
2. scoping each rule inside contents.css
in case must link modified copy of ckeditor's contents.css file. each of rule's selector must scoped "my-container" class, doesn't affect rest of page. example contents.css file:
.my-container { /* font */ font-family: sans-serif, arial, verdana, "trebuchet ms"; font-size: 12px; /* text color */ color: #333; /* remove background color make transparent */ background-color: #fff; margin: 20px; } .my-container .cke_editable { font-size: 13px; line-height: 1.6em; } .my-container blockquote { font-style: italic; font-family: georgia, times, "times new roman", serif; padding: 2px 0; border-style: solid; border-color: #ccc; border-width: 0; } .my-container .cke_contents_ltr blockquote { padding-left: 20px; padding-right: 8px; border-left-width: 5px; } .my-container .cke_contents_rtl blockquote { padding-left: 8px; padding-right: 20px; border-right-width: 5px; } .my-container { color: #0782c1; } .my-container ol,.my-container ul,.my-container dl { /* ie7: reset rtl list margin. (#7334) */ *margin-right: 0px; /* preserved spaces list items text direction other list. (#6249,#8049)*/ padding: 0 40px; } .my-container h1,.my-container h2,.my-container h3,.my-container h4,.my-container h5,.my-container h6 { font-weight: normal; line-height: 1.2em; } .my-container hr { border: 0px; border-top: 1px solid #ccc; } .my-container img.right { border: 1px solid #ccc; float: right; margin-left: 15px; padding: 5px; } .my-container img.left { border: 1px solid #ccc; float: left; margin-right: 15px; padding: 5px; } .my-container pre { white-space: pre-wrap; /* css 2.1 */ word-wrap: break-word; /* ie7 */ } .my-container .marker { background-color: yellow; } .my-container span[lang] { font-style: italic; } .my-container figure { text-align: center; border: solid 1px #ccc; border-radius: 2px; background: rgba(0,0,0,0.05); padding: 10px; margin: 10px 20px; display: block; /* ie8 */ } .my-container figure figcaption { text-align: center; display: block; /* ie8 */ }
