Fixing Issues with the Ueditor Highlight Plugin SyntaxHighlighter

Fixes for issues with the Ueditor highlight plugin SyntaxHighlighter

1. If a line of code is too long, the code block becomes too wide. Edit shCoreDefault.css and add 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. After double-clicking, the textarea size is wrong and misaligned. Edit shCore.js and set a height for the textarea:

/**
 * 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 <textarea/> tag
 textarea.appendChild(document.createTextNode(code));
 textarea.style.height = "100%";// add this line to set textarea height to 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. For the line-number misalignment issue, add a piece of JavaScript to fix it manually:

// Handle syntaxHighlighter line wrap issue
$(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) + ')')
 ;
 // Fetch height
 var height = $codeLine.height() || 0;
 if (!height) {
 height = 'auto';
 }
 else {
 height = height += 'px';
 }
 // Copy height over
 $gutterLine.attr('style', 'height: ' + height + ' !important'); // fix by Edi, for JQuery 1.7+ under Firefox 15.0
 });
 });
 };
 // 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();
}