美化百度编辑器内容显示样式

原创 2016年06月01日 10:24:18

前提声明,不修改原有的代码,单纯的css操作,方法比较简单,只要有点基础的都会。
这里写图片描述
效果请看http://tool.52miui.com/rjjc/wyzz/1504.html
主要代码如下:

/*editor*/
.syntaxhighlighter a,.syntaxhighlighter code,.syntaxhighlighter div,.syntaxhighlighter table,.syntaxhighlighter table caption,.syntaxhighlighter table tbody,.syntaxhighlighter table td,.syntaxhighlighter table thead,.syntaxhighlighter table tr,.syntaxhighlighter textarea{-moz-border-radius:0;-webkit-border-radius:0;border:0;bottom:auto;float:none;height:auto;left:auto;margin:0;outline:0;overflow:visible;padding:0;position:static;right:auto;text-align:left;top:auto;vertical-align:baseline;width:auto;box-sizing:content-box;font-family:'Source Code Pro','Courier New',Courier,monospace;font-weight:600;font-style:normal;letter-spacing:0;background:0 0!important;min-height:0}
.syntaxhighlighter,.syntaxhighlighter table,.syntaxhighlighter table td.code {
    width: 100%
}
.syntaxhighlighter {
    margin: 20px 0;
    position: relative;
    overflow: auto;
    font-size: .85em;
    overflow-y: hidden;
    padding: 1em 0;
    background-color: #edf0f3
}
.syntaxhighlighter code.plain,.syntaxhighlighter code.value {
    color: #34495e
}
.syntaxhighlighter code.keyword {
    color: #2980b9
}
.syntaxhighlighter code.string {
    color: #ef6e7e
}
.syntaxhighlighter code.comments {
    color: #b1bbc5
}

.syntaxhighlighter.source {
    overflow: hidden
}
.syntaxhighlighter .bold {
    font-weight: 700
}
.syntaxhighlighter .italic {
    font-style: italic
}
.syntaxhighlighter .line {
    white-space: pre
}
.syntaxhighlighter caption {
    text-align: left;
    padding: .5em 0 .5em 1em
}
.syntaxhighlighter td.code .container {
    position: relative
}
.syntaxhighlighter td.code .container textarea {
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: none;
    background: #fff;
    padding-left: 1em;
    overflow: hidden;
    white-space: pre
}
.syntaxhighlighter td.gutter {
    background: rgba(0,0,0,.05);
    display: none

}
.syntaxhighlighter td.code .line {
    padding: 0 1.5em
}
.syntaxhighlighter.show {
    display: block
}

.syntaxhighlighter.collapsed table {
    display: none
}
.syntaxhighlighter.collapsed .toolbar {
    padding: .1em .8em 0;
    font-size: 1em;
    position: static;
    width: auto;
    height: auto
}
.syntaxhighlighter.collapsed .toolbar span {
    display: inline;
    margin-right: 1em
}
.syntaxhighlighter.collapsed .toolbar span a {
    padding: 0;
    display: none
}
.syntaxhighlighter .toolbar span.title,.syntaxhighlighter.collapsed .toolbar span a.expandSource {
    display: inline
}
.syntaxhighlighter .toolbar {
    position: absolute;
    right: 1px;
    top: 1px;
    width: 11px;
    height: 11px;
    font-size: 10px;
    z-index: 10
}
.syntaxhighlighter .toolbar a {
    display: block;
    text-align: center;
    text-decoration: none;
    padding-top: 1px
}
.syntaxhighlighter .toolbar a.expandSource,.syntaxhighlighter.printing .toolbar {
    display: none
}
.syntaxhighlighter.ie {
    font-size: .9em;
    padding: 1px 0
}
.syntaxhighlighter.ie .toolbar {
    line-height: 8px
}
.syntaxhighlighter.ie .toolbar a {
    padding-top: 0
}
.syntaxhighlighter.printing .line.alt1 .content,.syntaxhighlighter.printing .line.alt2 .content,.syntaxhighlighter.printing .line.highlighted .number,.syntaxhighlighter.printing .line.highlighted.alt1 .content,.syntaxhighlighter.printing .line.highlighted.alt2 .content {
    background: 0 0
}
.syntaxhighlighter.printing .line .number {
    color: #bbb
}
.syntaxhighlighter.printing .line .content {
    color: #000
}
.syntaxhighlighter.printing a {
    text-decoration: none
}
@media print {
    .syntaxhighlighter .line {
        white-space: pre-line
    }
    .syntaxhighlighter .gutter {
        display: none
    }
}

将此段css代码放在前端显示的文章里,或者放在css文件里都可以。

版权声明:本文为博主原创文章,转载请注明。

百度ueditor 编辑器使用问题收集

1 setContent 有时不起作用 2 添加的html元素样式不起作用,div等元素被替换了 3 隐藏部分不要的按钮...
  • huwei2003
  • huwei2003
  • 2016年06月06日 09:24
  • 1713

UEditor样式被过滤无法显示问题

前言:          上周开发中有用到开源的富文本编辑器UEditor,在使用的过程中遇到了样式被过滤无法显示问题,经过一番折腾终解决,此外,还有一些关于获取前台界面元素的一些总结。 1. UEd...
  • yiyihuazi
  • yiyihuazi
  • 2016年07月31日 19:34
  • 4167

使用百度富文本编辑器UEditor碰到的问题

使用百度富文本编辑器UEditor碰到的问题        转自 博客园 前面使用的是kindEditor,但是发现这个已经不再维护,并且bug不少,而我又不会改,哈哈,所以我就放弃了。 原来想过...
  • a724888
  • a724888
  • 2017年03月08日 09:41
  • 1844

百度开源编辑器内容获取与更改迸

http://www.hotdic.com/s/%e9%9d%92%e5%b2%9b%e5%93%aa%e9%87%8c%e4%b9%b0%e6%b0%b0%e5%8c%96%e9%92%be%ef%...
  • rewzb00446
  • rewzb00446
  • 2014年07月12日 22:07
  • 211

解决百度ueditor编辑器内容在jquery.validate中不验证问题

问题场景 最近项目中表单数据提交用到了百度的文本编辑器ueditor,同时表单的验证用到了jquery.validate验证工具,并添加了content的非空验证,提交表单后发现ueditor的...
  • u011675274
  • u011675274
  • 2017年11月15日 11:20
  • 237

ueditor 百度编辑器使用 嵌入ci (可灵活运用,建立数据库,写入并读出,实现用户自定义网页页面内容)

1、下载源码  http://ueditor.baidu.com/website/download.html 2、嵌入页面 3、接收传递,显示输出 (2、 ../bootstrap/js/u...
  • A9925
  • A9925
  • 2015年04月21日 17:51
  • 588

如何通过CSS样式设置单元格显示内容的长度.doc

  • 2011年06月09日 12:44
  • 29KB
  • 下载

编辑器生成的html代码再显示的样式冲突问题

网页编辑器是个不错的东西,在很多时候都需要使用到,用来编辑各种文本。然而使用网页编辑器却会存在一些各种各样的问题,解决这些问题总会让人头疼。 最近使用编辑器编写正文,在需要再在前台展示的时候发现样式冲...
  • qq_21915727
  • qq_21915727
  • 2017年01月05日 15:08
  • 1318

帝国cms编辑器添加插入代码插件内容页模板高亮显示

  • 2015年03月03日 21:38
  • 608B
  • 下载

js处理去掉富文本编辑的html,样式,只显示纯文字内容,以供列表页使用

var description = ' 1.国际保险经纪行业收入分析 2010年全球保险经纪行业市场规模为437.56亿美元,2015年增长至581.3亿美元。 2010-2015年国际保险经纪行...
  • Lpandeng
  • Lpandeng
  • 2018年01月02日 18:06
  • 148
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:美化百度编辑器内容显示样式
举报原因:
原因补充:

(最多只允许输入30个字)