FunnyWeb

据说这里有很多神奇的东西...

UEDITOR高亮插件SYNTAXHIGHLIGHTER问题修正

2017-07-09 14:19:452490 views

原地址:http://blog.yinfupai.com/2980.html

ueditor中代码高亮插件整体效果非常一般。。。而且有一些小问题,百度上搜到了大师的解决方案,记录一下。

插件默认路径为\ueditor\third-party\SyntaxHighlighter\

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

.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,为文本框增加高度:

/**
 * Quick code mouse double click handler.
 */
function quickCodeHandler(e)
{
    var target = e.target,
        highlighterDiv = findParentElement(target, '.syntaxhighlighter'),
        container = findParentElement(target, '.container'),
        textarea = document.createElement('textarea'),
        highlighter
        ;
    if (!container || !highlighterDiv || findElement(container, 'textarea'))
        return;
    highlighter = getHighlighterById(highlighterDiv.id);
    // add source class name
    addClass(highlighterDiv, 'source');
    // Have to go over each line and grab it's text, can't just do it on the
    // container because Firefox loses all \n where as Webkit doesn't.
    var lines = container.childNodes,
        code = []
        ;
    for (var i = 0; i < lines.length; i++)
        code.push(lines[i].innerText || lines[i].textContent);
    // using \r instead of \r or \r\n makes this work equally well on IE, FF and Webkit
    code = code.join('\r');
    // For Webkit browsers, replace nbsp with a breaking space
    code = code.replace(/\u00a0/g, " ");
    // inject  tag
    textarea.appendChild(document.createTextNode(code));
    textarea.style.height = "100%";//加上这一行,指定文本框的高度为100%
    container.appendChild(textarea);
    // preselect all text
    textarea.focus();
    textarea.select();
    // set up handler for lost focus
    attachEvent(textarea, 'blur', function(e)
    {
        textarea.parentNode.removeChild(textarea);
        removeClass(highlighterDiv, 'source');
    });
};

3、行号显示错位的问题,在shCore.js内加上一段js人工解决:

//处理syntaxHighlighter换行问题
$(function () {
    fixLineNum();
});
function fixLineNum()
{
    // 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.log($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.rar