zoukankan      html  css  js  c++  java
  • 统一ckeditor编辑前后的样式(恢复默认样式)

    统一ckeditor编辑前后的样式(恢复默认样式)

    关键字: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; }

     

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

  • 相关阅读:
    (转)Linux下/etc/rc.local与/etc/init.d的区别与联系
    (转)谈免驱
    (转)获取android源码时repo的错误
    (转)platform_driver_register,什么时候调用PROBE函数 注册后如何找到驱动匹配的设备
    (转)typedef 函数指针的用法
    (转)分析kernel的initcall函数
    (转)Tiny210v2( S5PV210 ) 平台下 FIMD 对应 的 framebuffer 驱动中,关于 video buffer 的理解
    tiny210V2开发板hdmi输出到10.1寸LCD,无图像
    (转)学习linux的几本书
    (转)RGB接口和i80接口的区别
  • 原文地址:https://www.cnblogs.com/guanghuiqq/p/2625122.html
Copyright © 2011-2022 走看看