最近在JE论坛上面看到一位学生朋友实现的代码着色的JS代码,下载下来试用一下,先自己写了一个非常简单的简单的在线编辑器,类似于JE的“BBCoce编辑器”:
// 简单的在线编辑器 (支持IE,OPERA,FIREFOX) // // 参数说明: // // htmlElement : 需要使用该在线编辑器的HTML元素 // // tagPrefix : 编辑器标签 // /// function Tag(htmlElement, tagPrefix) { var element = document.getElementsByTagName(htmlElement)[0]; var tagSuffix = tagPrefix.replace(/\[/ig, '[/'); //IE if (document.selection && document.selection.type == "Text") { var sel = document.selection.createRange(); if (sel.text.length > 0) { code = tagPrefix + sel.text + tagSuffix; sel.text = code; } } else if (window.getSelection && element.selectionStart > -1) { //如果选择textarea编辑框的第一个字符开始选择,则element.selectionStart = 0 //firefox 需要根据光标的位置来或取选择的文本 var startP = element.selectionStart; var endP = element.selectionEnd; if (startP != endP) { element.value = element.value.substring(0, startP) + tagPrefix + element.value.substring(startP, endP) + tagSuffix + element.value.slice(endP); } else { element.value += tagPrefix + tagSuffix; } } }
如何使用:
<input type="button" value="Code" οnclick="Tag('textarea','[code]');"> <input type="button" value="B" style="font-weight:bold;" οnclick="Tag('textarea','[b]');">
通过button的onclick事件调用Tag函数。
JCC2这个着色工具在使用的时候,是匹配页面中〈textarea name="code"〉或〈pre name="code"〉这样的元素,然后再着色,所以在显示的页面,需要加上如下的javascript代码:
<script type="text/javascript"> jssc.colorAll("code"); </script>
当然,由于页面中标签都是“[” , “]”,首先需要在显示页面中将这些标签格式成HTML的标签:
function tagCode2html(str) { var searchArray = new Array( '\\\[b\\\]', '\\\[\\\/b\\\]', '\\\[i\\\]', '\\\[\\\/i\\\]', '\\\[u\\\]', '\\\[\\\/u\\\]', '\\\[code\\\]', '\\\[\\/code\\]' ); var replaceArray = new Array( '<b>', '</b>', '<i>','</i>', '<u>', '</u>', '<textarea name=\"code\" class=\"java\">', '</textarea>' ); var len = searchArray.length; for (var i = 0; i < len; i++) { re = new RegExp(searchArray[i], "ig"); str = str.replace(re, replaceArray[i]); } return str; }
这样,就可以实现代码的着色。
但JCC2这个着色工具有一个致命的弱点。
看这一段代码:
E[F].parentNode.appendChild(D); E[F].parentNode.appendChild(A); E[F].style.display = "none"
将着过色后的代码,append到Node中去,这样造成的后果是:着过色后的代码,都会显示在输出文本的最后。
所以,将着色引擎换成dp.SyntaxHighlighter:
dp.SyntaxHighlighter.HighlightAll("code");
----------------------------------------------------------------------------------------------------------------------
解决JCCS的缺点:
将
E[F].parentNode.appendChild(D); E[F].parentNode.appendChild(A); E[F].style.display = "none"
这三句代码改成:
E[F].parentNode.replaceChild(A,E[F]);
使用节点A来替换E[F]节点,这样,就可以了,但还有一个问题,节点D无法append上去,暂时还没有想到解决的方法。
-----------------------------------------------------------------------------------------------------------------------
再次解决JCCS的缺点:
将colorList方法改成如下方法:
jssc.colorList = function(E) { for (var F in E) { var _ = E[F].firstChild.nodeValue,B = this.splitLine(_),C = E[F].className,$ = this.colorCode(_, B, C); E[F].id = "jssc" + F; var newNode = document.createElement("div"); newNode.id = E[F].id var A = document.createElement("div"),D = document.createElement("div"); D.innerHTML = C.substr(0, 1).toUpperCase() + C.substr(1) + " \u4ee3\u7801"; D.innerHTML += "<span οnclick='jssc.copyToClipboard(\"" + _ + "\")'>\u590d\u5236\u5230\u526a\u8d34\u677f</span>"; D.className = "jssccodetitle"; A.appendChild($); A.className = "jssc"; newNode.appendChild(D); newNode.appendChild(A); E[F].parentNode.replaceChild(newNode, E[F]); } };
主要是新建一个div的node ---- newNode,然后将A和D都append到新建的newNode上,再用newNode去replace掉E[F]这个node。
另外,对于
copyToClipboard这个方法也做了一点小修改,直接将着色部分的文本作为参数传递过去,而不再是传递一个Node 的 id。