调整ueditor编辑器的显示问题

[文章作者:磨延城 转载请注明原文出处: https://mo2g.com/view/60/ ]

在没更换最新版本的ueditor编辑器之前就发现了,经过ueditor编辑器高亮渲染的代码,有错行的现象,现在更新到最新版本ueditor 1.2.6.1,依然存在这个问题,而且还发现,代码过长还会超出展示区域。想了想才给百度支付了网盟推广的费用没几天,之后遇上问题的各种说词,就不指望等百度更新了,都忙着收钱去了,还是自己来吧。

在没更换最新版本的ueditor编辑器之前就发现了,经过ueditor编辑器高亮渲染的代码,有错行的现象,现在更新到最新版本ueditor 1.2.6.1,依然存在这个问题,而且还发现,代码过长还会超出展示区域。想了想才给百度支付了网盟推广的费用没几天,之后遇上问题的各种说词,就不指望等百度更新了,都忙着收钱去了,还是自己来吧。

1)超出展示区域的现象如图:

这个问题最突出,影响整个页面的美感,一开始只是简单的加了个width样式,细节没太注意,后来才发现错行的现象。

2)错行的现象如下图:

第10行的代码因为过长,进行换行操作,但左侧的行号没法正确关联,导致从10行之后的行号都是错误的。

最后,还是趁着周末的时间,用Firefox的firebug调试了一下,完美解决了以上的问题。下边先给出修改后的效果,并简单说明要修改ueditor的地方。

要修改的文件就一个,就是ueditor的ueditor\third-party\SyntaxHighlighter\shCoreDefault.css样式文件,要修改的有三个地方:

1).syntaxhighlighter td.code .line

.syntaxhighlighter td.code .line {
    padding: 0 1em !important;
}

改成

.syntaxhighlighter td.code .line {
    padding: 0 1em !important;
    white-space: nowrap;
}

2).syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter, .syntaxhighlighter td, .syntaxhighlighter tr, .syntaxhighlighter tbody, .syntaxhighlighter thead, .syntaxhighlighter caption, .syntaxhighlighter textarea

.syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter,
 .syntaxhighlighter td, .syntaxhighlighter tr, .syntaxhighlighter tbody,
 .syntaxhighlighter thead, .syntaxhighlighter caption, .syntaxhighlighter textarea {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
    border: 0 none !important;
    bottom: auto !important;
    float: none !important;
    font-family: Monaco,Menlo,Consolas,"Courier New",monospace;
    font-size: 13px !important;
    font-style: normal !important;
    font-weight: normal !important;
    left: auto !important;
    line-height: 1.1em !important;
    margin: 0 !important;
    min-height: inherit !important;
    outline: 0 none !important;
    overflow: visible !important;
    padding: 0 !important;
    position: static !important;
    right: auto !important;
    text-align: left !important;
    top: auto !important;
    vertical-align: baseline !important;
}

把overflow: visible !important;样式去掉。

3).syntaxhighlighter td.code .container

.syntaxhighlighter td.code .container {
    position: relative !important;
}

改成

.syntaxhighlighter td.code .container {
    position: relative !important;
    width: 574px;
    overflow-x: auto;
}

其中,width的值要根据页面的排版来设定,磨途歌这里设置了574像素。

配置好后,再看看页面,又恢复了以往的简洁。

    评论:

    1. unknown 回复2015年06月09日 01时43分
      磨者
      好文章,内容欢风华丽.禁止此消息:nolinkok@163.com
      荷兰网 http://www.zhongguohelanwang.com/

    2. 回复2016年12月15日 14时53分
      磨者
      包养网http://www.ememe.cc/forum.php 求包养网http://www.ememe.cc/forum.php
      外围女网站http://www.ememe.cc/forum.php 私人伴游http://www.ememe.cc/forum.php
      大学生求包养http://www.ememe.cc/forum.php 外围女招聘http://www.ememe.cc/forum.php
      外围女经纪人http://www.ememe.cc/forum.php 私人伴游招聘http://www.ememe.cc/forum.php

    3. 磨者 923 回复2017年02月03日 23时58分
      磨者
      http://www.ouruijiaju.cn/

    4. 我来说两句:

        切换  

      磨途歌检测发现,您当前使用的浏览器版本过低,要想使用画板模式,请先更新浏览器

        切换  

      磨途歌随机验证码