如何解决 css 与 bootstrap 页面中的 ckeditor 内容冲突
How to solve css conflict with ckeditor content in boostrap page
Ckeditor 本身通过 iframe 完成了这个技巧。
但是，如果您想在 boostrap 布局页面中使用 ckeditor 生成的内容（不是 ckeditor istelf，而是 html 在其中生成的内容），有什么解决方案吗？
例如，基础 H1 元素将从 boostrap type.less
捕获 boostrap class
h1, .h1, h2, .h2, h3, .h3 {
margin-top: 20px;
margin-bottom: 10px;
}
而且类似的冲突层出不穷。是否有任何 way/workaround 从 boostrap css 中排除 div 元素？
半年后我又遇到了同样的问题。但是有一些因素我当时没有考虑到。
解决方案1：实际上你不想这样做，当你购买主题或使用bootsrap时，你的整个页面都是相同的风格。您不希望将 ck-editor 内容置于 1:1 格式，这样看起来会很丑陋，最终客户会对符合他的 page/header/footer 的外观感到满意。
解决方案 2：但是如果你坚持，我尝试了很多东西。
一个。首先，boostrap 中没有 "ignoreBootsrap" class，或者没有完整的 CK 编辑器 css 来覆盖实际的 css。
乙。然后你可能认为你只是下载 reset.css 之一并将其定位到你的容器 class 上，然后重新应用特定于 ck-editor 的 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)) 。这一切听起来不错，但行不通，因为 chrome（和其他浏览器）用户代理默认值 css 会影响 ckeditor 中的很多 css，当应用重置时，用户代理边距也会受到影响并且东西被取消，所以结果与你在 ck-editor 中看到的不匹配。
C - 我能够获得可接受结果的唯一解决方案是，在 bootsrap css 上按 ctrl-c 并将其包装到 "applyBootsrap" class（使用 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)
但最后我使用了解决方案 1，因为原始的 ckeditor 内容与我的布局主题不太匹配。
在 css 文件中进行的以下设置节省了我解决类似问题的时间。 ckeditor 开始像我们预期的那样工作...
当然，如果需要不同的override，可以在设置initial后继续重新配置。
div.ck.ck-editor__editable_inline * {
all: revert;
}
Ckeditor 本身通过 iframe 完成了这个技巧。
但是，如果您想在 boostrap 布局页面中使用 ckeditor 生成的内容（不是 ckeditor istelf，而是 html 在其中生成的内容），有什么解决方案吗？
例如，基础 H1 元素将从 boostrap type.less
捕获 boostrap classh1, .h1, h2, .h2, h3, .h3 {
margin-top: 20px;
margin-bottom: 10px;
}
而且类似的冲突层出不穷。是否有任何 way/workaround 从 boostrap css 中排除 div 元素？
半年后我又遇到了同样的问题。但是有一些因素我当时没有考虑到。
解决方案1：实际上你不想这样做，当你购买主题或使用bootsrap时，你的整个页面都是相同的风格。您不希望将 ck-editor 内容置于 1:1 格式，这样看起来会很丑陋，最终客户会对符合他的 page/header/footer 的外观感到满意。
解决方案 2：但是如果你坚持，我尝试了很多东西。
一个。首先，boostrap 中没有 "ignoreBootsrap" class，或者没有完整的 CK 编辑器 css 来覆盖实际的 css。
乙。然后你可能认为你只是下载 reset.css 之一并将其定位到你的容器 class 上，然后重新应用特定于 ck-editor 的 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)) 。这一切听起来不错，但行不通，因为 chrome（和其他浏览器）用户代理默认值 css 会影响 ckeditor 中的很多 css，当应用重置时，用户代理边距也会受到影响并且东西被取消，所以结果与你在 ck-editor 中看到的不匹配。
C - 我能够获得可接受结果的唯一解决方案是，在 bootsrap css 上按 ctrl-c 并将其包装到 "applyBootsrap" class（使用 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)
但最后我使用了解决方案 1，因为原始的 ckeditor 内容与我的布局主题不太匹配。
在 css 文件中进行的以下设置节省了我解决类似问题的时间。 ckeditor 开始像我们预期的那样工作...
当然，如果需要不同的override，可以在设置initial后继续重新配置。
div.ck.ck-editor__editable_inline * {
all: revert;
}