加入收藏 | 设为首页 | 会员中心 | 我要投稿 | 高级搜索 | RSS
热门搜索:帝国cms 
您当前的位置:首页 > 资料区 > 帝国CMS

百度编辑器自动适应大小自动换行和换行后引起的行号错乱问题

时间:2019-12-18 11:23:26  来源:  作者:

百度编辑器自动适应大小自动换行和换行后引起的行号错乱问题


其它问题

最新帝国cms7.5整合百度编辑器ueditor教程

百度编辑器ueditor1_4_3_3修改代码高亮行号后面的竖线条大小颜色

配置语法高亮

在编辑器中,默认的就有“语法高亮”的功能,编辑保存后,默认的是使用<pre>标签包含的一段代码。

在前端网页展示时,就需要引入相关的第三方插件,并调用其方法进行着色。

具体代码如下,在<head>插入相应的样式和脚本,然后页面加载完成后调用方法进行着色(这里用到JQuery):

<link href="/Contents/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css" />
<script src="/Contents/ueditor/third-party/SyntaxHighlighter/shCore.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function(){
        SyntaxHighlighter.highlight();
    });
</script>

修复不会自动换行问题

如果你的内容展示区域不够宽的话,那么代码如果超过显示区域的宽度后,仍然会继续延伸。

上网搜索了一下,发现是语法高亮的插件的样式没有强制换行倒置的。

打开“shCoreDefault.css”文件,找到下面这段,并加载强制换行的属性即可。

具体代码如下:

.syntaxhighlighter
{
    width: 100% !important;
    margin: .3em 0 .3em 0 !important;
    position: relative !important;
    overflow: auto !important;
    background-color: #f5f5f5 !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    border-collapse: separate !important;
    word-break:break-all; /* dier add this */
}

实际上就是加进入

word-break:break-all; /* dier add this */

修复行号错位问题

当修复了自动换行的问题后,另一个问题也随之而来。

因为一行代码显示成两行了,而左侧的行号并未因为而做出改变。这样就会造成高度不统一而错位了。

又上网搜索了一下,发现已经有人写了脚本处理相应的问题了。

具体代码如下:

<script type="text/javascript">
    $(function(){
        SyntaxHighlighter.highlight();
        $("table.syntaxhighlighter").each(function () {
            if (!$(this).hasClass("nogutter")) {
                var $gutter = $($(this).find(".gutter")[0]);
                var $codeLines = $($(this).find(".code .line"));
                $gutter.find(".line").each(function (i) {
                    $(this).height($($codeLines[i]).height());
                    $($codeLines[i]).height($($codeLines[i]).height());
                });
            }
        });
    });
</script>

到这里,终于搞定了。

大家注意了相应的页面要加载jquery.js文件。


 关键字: script  代码  break  ueditor  编辑器  行号  高亮  javascript  修复  百度
顶一下
踩一下
返回首页
返回首页
热门下载
最新文章
相关文章
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表