简单的在线编辑器,处理JSSC ver2.0的一个缺点

最近在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。

 

 

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值