百度编辑器ueditor前台代码高亮无法自动换行解决方法

问题描述:

这两天本站成功安装整合了百度编辑器ueditor,用着还挺不错,但是遇到了点小问题问题描述:在内容里面插入代码高亮显示,后台编辑器中是可以自动换行的,但是发表后,在前台查看,发现代码不能自动换行,直接超出了内容页的边界,极不美观,虽然复制是可以完整的。解决办法:找到高亮代码显示的css文件/e/data/ecmseditor/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css具体的路径根据你的ueditor做改动找到代码如下:

由于我的博客主要是代码分享,很多贴的代码,都很长。很多时候我都是手动给他换行。

在内容里面插入代码高亮显示,后台编辑器中是可以自动换行的,但是发表后,在前台查看,发现代码不能自动换行,直接超出了内容页的边界,极不美观,虽然复制是可以完整的。

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

但是今天实在是受不了。从网上找个办法解决一下。

解决办法:

复制代码

在文件夹:zb_systemADMINueditorthird-partySyntaxHighlighter

找到高亮代码显示的css文件
/e/data/ecmseditor/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css

改成代码如下:

在文件shCoreDefault.pack.css添加css:

具体的路径根据你的ueditor做改动

.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;word-break:break-all;

复制代码 代码如下:body .syntaxhighlighter
.line{ white-space: pre-wrap !important;}
.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;word-break:break-all;

找到

复制代码

2、Jquery代码:

复制代码
代码如下:.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;

就是加上word-break:break-all;可能不同的ueditor版本css写法不一样,只要对应的位置加上这个强制换行就可以了

$ { // Line wrap back var shLineWrap = function () { $.each { // Fetch var $sh = $, $gutter = $sh.find, $code = $sh.find ; // Cycle through lines $gutter.children.each { // Fetch var $gutterLine = $, $codeLine = $code.find('.line:nth-child ; //alert; // Fetch height var height = $codeLine.height { height = 'auto'; } else { height = height += 'px'; //alert; } // Copy height over $gutterLine.attr('style', 'height: ' + height + ' !important'); // fix by Edi, for JQuery 1.7+ under Firefox 15.0 console.debug, height, $gutterLine.text; }; // Line wrap back when syntax highlighter has done it's stuff var shLineWrapWhenReady = function () { if ($.length === 0) { setTimeout(shLineWrapWhenReady, 10); } else { shLineWrap(); } }; // Fire shLineWrapWhenReady;

改成

上面的代码就是属于长代码。大家看看是不是都换行了??

复制代码
代码如下:.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;word-break:break-all;

现在,行号的高度就能和代码的高度保持一致了。

就是加上 word-break:break-all;

可能不同的ueditor版本css写法不一样,只要对应的位置加上这个强制换行就可以了

最终效果

发表评论

电子邮件地址不会被公开。 必填项已用*标注