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();
}也可以直接下载下面两个文件替换