Ueditor高亮插件SyntaxHighlighter显示时Bug修复

Ueditor高亮插件SyntaxHighlighter问题修正

1、如果一行代码太长，就会造成代码块过宽，修改shCoreDefault.css，加上word-break:break-all：

         格式化后的第34行

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

 

 

 

2、双击以后文本框大小不对错位问题，修改shCore.js，为文本框增加高度：

      shCore.js   第1808行

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

        // preselect all text

加上“textarea.style.height = "100%";” 双击问题修复了，但会有行号显示问题，当一行很长换行后，第二行也会计数。

修复行号问题：行号显示错位的问题，加上一段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();