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; }

     

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

  • 相关阅读:
    chart控件多个ChartArea
    winform chart画折线,波形图,多条数据
    C# Chart 折线图 多条数据展示
    task一个任务结束后执行另一个操作
    C#多线程同步 读写锁ReaderWriterLock的用法
    C# 多线程文件读写整理总结
    vue解决跨域问题
    接前端页面
    使用vue+zrender绘制体温单 三测单(2)
    使用vue+zrender绘制体温单 三测单(1)
  • 原文地址:https://www.cnblogs.com/guanghuiqq/p/2625122.html
Copyright © 2011-2022 走看看