Ckeditor itself does the trick with iframe.
But is there any solution, if you want to use content generated by ckeditor (not ckeditor istelf but only html generated in it) in boostrap layouted page ?
For example base H1 element will catch boostrap class from boostrap type.less
h1, .h1, h2, .h2, h3, .h3 {
margin-top: 20px;
margin-bottom: 10px;
}
And there are endless similar conflicts. Is there any way/workaround of excluding div element from boostrap css ?
After half of year i encountered same problem again. But there are some factors i did not take into mind back then.
Solution 1 : You do not want to do this in fact, when you have bought theme or using bootsrap, your whole page is in same style. You do not want fist in eye by placing ck-editor content in 1:1 format, it will look ugly, and in the end customer will be happy about looks that fit his page/header/footer .
Solution 2 : But if you insist, i tried a lot of stuff.
A. First there is no "ignoreBootsrap" class in boostrap, or no full CK-editor css to override actual css.
B. Then you may think you just download one of reset.css and target it on your container class and then reaply ck-editor specific css stuff(How to apply ckeditor css to output) . (can be done when you for example use http://winless.org/online-less-compiler, copy paste reset.css (http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css) and wrap it in your class "resetCssContaner", result will be added selector to all reset selectors so you do not have to do it manually (http://pastebin.com/e62w8cHF)) . This all sounds nice but will not work, since of chrome(and other browsers) User Agent default css that affect a lot of css in ckeditor, when reset is applied also user agent margins and stuff get nullified so result does not mathch what you see in ck-editor.
C - Only solution i was able to pull of with acceptable result was, ctrl-c on bootsrap css and wrap it to "applyBootsrap" class (with http://winless.org/online-less-compiler, do not wrap css appliing on body thats first few lines). In my case i wanted to use ck-editor content for text-pages, that consisted from header, user content and footer. I added to my header and footer "applyBootsrap" class so bootsrap css will not touch ckeditor output html content. (stil also need apply some specific css for ckeditor How to apply ckeditor css to output)
But in the end i used solution 1, since raw ckeditor content did not really match much my layout theme.