UEDITOR高亮插件SYNTAXHIGHLIGHTER问题修正
原地址: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(); }
也可以直接下载下面两个文件替换