统一ckeditor 编辑前后的样式（恢复默认样式）

用ckeditor 或者是别的在线编辑器或许都会存在一个问题，即内容发表后呈现的样式会与编辑时的不一样，原因是编辑器其实是个内嵌的iframe，它里面用的大多是浏览器默认的样式（ckeditor 在其中另外定义了字体以及ul, ol 的缩进值），而发表后内容则呈现在自定义样式的页面上，自定义的样式往往和浏览器默认的样式不同，具体的差异主要表现在body 的字体、p 的间距、a 链接的样式、列表项ul ol li 的样式以及h1 – h6 标题的样式上。

之前项目上遇到过这个问题，于是写了这么一段样式，用于统一ckeditor 编辑前后的样式，实际上也就是恢复某个区域为默认样式，用的时候只需要在该区域的标签处添加一个class=”fixck” 即可：

.fixck {
    font-family: Arial, Verdana, sans-serif !important;
    font-size: 12px !important;
    color: #222 !important;
    line-height: normal !important;
}

.fixck p {
    margin: 12px 0 !important;
}

.fixck a {
    text-decoration: underline !important;
    color: #00E !important;
}

.fixck ul,
.fixck ol {
    padding-left: 40px !important;
    padding-right: 40px !important;
}
.fixck ul {
    list-style: disc outside none !important;
}
.fixck ol {
    list-style: decimal outside none !important;
}
.fixck li {
    display: list-item !important;
}

.fixck h1 {
    font-weight: bold !important;
    font-size: 32px !important;
    margin: 21px 0 !important;
}
.fixck h2 {
    font-weight: bold !important;
    font-size: 24px !important;
    margin: 19px 0 !important;
}
.fixck h3 {
    font-weight: bold !important;
    font-size: 19px !important;
    margin: 18px 0 !important;
}
.fixck h4 {
    font-weight: bold !important;
    font-size: 16px !important;
    margin: 21px 0 !important;
}
.fixck h5 {
    font-weight: bold !important;
    font-size: 13px !important;
    margin: 22px 0 !important;
}
.fixck h6 {
    font-weight: bold !important;
    font-size: 11px !important;
    margin: 24px 0 !important;
}

这些样式在不同的浏览器下与其默认样式的表现可能存在有一点点差异，基本无视~

第一篇。。希望自己能坚持下去，加油！

转载于:https://www.cnblogs.com/ecma/archive/2011/11/11/2245978.html