ueditor不显示代码高亮部分且不换行、错行、双击等问题修正


第一部分:添加uedtior css 与 js

让自己的页面加载以下代码:

<link rel="stylesheet" type="text/css" href="/static/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css">
<script type="text/javascript" src="/static/ueditor/third-party/SyntaxHighlighter/shCore.js"></script>
<script>
    SyntaxHighlighter.all();
</script>

注:herf  src路径修改在自己的路径



第二部分:修正添加以上代码后不自动换行

找到以下目录: ueditor/third-party/SyntaxHighlighter/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;或着 word-break:break-word;

网上多半是word-break:break-all;我换成了word-break:break-word; 可能根据自己的页面,我的手机用break-word比较合适一些,用break-all的话部分代码会出边框一点点。


最终为:

.syntaxhighlighter{word-break:break-word;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;}


补充:添加到 .syntaxhighlighter .code{....}里面也是可以的,自己可以多测试一下~


第三部分:双击以后文本框不对错位问题修改shCore.js

shCore.js   第1808行

textarea.style.height = "100%";//加上这一行,指定文本框的高度为100%

        // inject <textarea/> tag
        textarea.appendChild(document.createTextNode(code));
        textarea.style.height = "100%";//加上这一行,指定文本框的高度为100%
        container.appendChild(textarea);
 
        // preselect all text


第四部分:修复换行行号问题加入js

将下面js代码加到SyntaxHighlighter.all();之前,行号问题解决了,但还需要引入jQuery

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


第四部分:代码行号1为空

以前正常最近,发现代码行号1 为空解决办法

打开 shCoreDefault.css

查找以下代码删除即可:

vertical-align:baseline!important;