简单的在线编辑器，处理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" onclick="Tag('textarea','[code]');">
<input type="button" value="B" style="font-weight:bold;" onclick="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 onclick='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。

 

 

 

 

 

 

 

评论

7 楼 Army 2008-02-09  

不是，第2个回复是针对将appandChild改成replace的回复。

6 楼 rainlife 2008-02-09  

不太明白你两个帖子的意思
这个帖子：

引用

另外，其实这些问题还有个很简便的解决方法：把textarea放在一个div里……

算是对下面这个帖子：

引用

关于“copyToClipboard”方法的修改，我提一点小疑问：
源代码中有许多特殊的字符：" ' < > & \n 等等，直接将源代码文本作为参数传递过来错误是很多的，需要经过一些手段处理，如此将增加复杂性，你是怎么做的呢？

我用的另外一种方法不是太好，先听听意见。

的回复吗？

5 楼 Army 2008-02-09  

另外，其实这些问题还有个很简便的解决方法：把textarea放在一个div里……

4 楼 Army 2008-02-09  

关于“copyToClipboard”方法的修改，我提一点小疑问：
源代码中有许多特殊的字符：" ' < > & \n 等等，直接将源代码文本作为参数传递过来错误是很多的，需要经过一些手段处理，如此将增加复杂性，你是怎么做的呢？

我用的另外一种方法不是太好，先听听意见。

3 楼 rainlife 2008-02-08  

不用多谢，

引用

我觉得写一个例子的话最好能给个链接展示一下，如此能让大家更直观形象得体会～

其实这样的例子，并不会展示，应该现在网上到处都有UUB的在线编辑器，我只是看看怎么写的，另外就是试试你的代码着色工具。另外提个建议，将“拷贝到剪贴板”的样式换一下，你用〈span〉 来做，又没有提示，感觉不是太好。

2 楼 Army 2008-02-06  

我觉得写一个例子的话最好能给个链接展示一下，如此能让大家更直观形象得体会～

1 楼 Army 2008-02-06  

很高兴您能指出它的不足之处，非常感谢您的帮忙！

关于那个替换原节点，的确是我的疏忽，曾经开始时我想到使用replace，后来不知什么原因一下子给漏掉了，您的改正对我很有帮助，谢谢！

另外的两个部分也是非常好的建议，我会抽空将其修改完善的～

最后，祝大家新年愉快！