下午快下班时昏昏欲睡，在浏览一论坛时忽然看到输入框上的编辑器，于是精神一振，花了一个小时也给博客加入了这个功能。
之前有过这样的想法，并且上网找过这方面的代码，貌似很多人用的是一款焦作quicktags什么的编辑器。但是这个太大，足足快20KB了，实在是太臃肿了。
所以我就自己写了。代码也不多，顺便也把表情添加和这个整合到一起了。当然，功能上也许就没quicktags全面了。
其实JavaScript代码不难写，难点主要在与体验方面，比如鼠标光标的位置，对于选择的字符的处理以及处理后光标返回的位置。
我的代码遵寻以下几点效果：
- 对于普通的加粗（<strong>）、倾斜（<em>）等，如果鼠标没有选择文字，则直接在光标位置处加上完整闭合的标签。然后光标定位到标签中间，方便直接在标签中写入文字。
- 对于用鼠标选择了一段文字的，则在原位置返回经过格式化后的文字。然后光标定位到闭合标签后面。
- 链接、图片则需要在弹出窗口中输入相应的链接地址及alt等。
我定义了一个插入编辑器的函数，有三个参数，前两个必须，最后一个etag可选（比如img就没有后半部标签）：
1: /**
2:
3: * @return void
4:
5: * @param myField 输入框对象
6:
7: * @param ftag 标签前半部分，如<strong>
8:
9: * @param etag 标签后半部分，如</strong>
10:
11: */
12:
13: function addEditor(myField,ftag,etag){
14:
15: if (document.selection) {
16:
17: myField.focus();
18:
19: sel = document.selection.createRange();
20:
21: etag ? sel.text = ftag + sel.text + etag : sel.text = ftag;
22:
23: myField.focus();
24:
25: } else if (myField.selectionStart || myField.selectionStart == '0') {
26:
27: var startPos = myField.selectionStart;
28:
29: var endPos = myField.selectionEnd;
30:
31: var cursorPos = endPos;
32:
33: etag ? myField.value = myField.value.substring(0, startPos) + ftag + myField.value.substring(startPos, endPos) + etag + myField.value.substring(endPos, myField.value.length) : myField.value = myField.value.substring(0, startPos) + ftag + myField.value.substring(endPos, myField.value.length);
34:
35: etag ? cursorPos += ftag.length + etag.length : cursorPos += ftag.length - endPos + startPos;
36:
37: if(startPos == endPos && etag)cursorPos -= etag.length;
38:
39: myField.focus();
40:
41: myField.selectionStart = cursorPos;
42:
43: myField.selectionEnd = cursorPos
44:
45: } else {
46:
47: myField.value += ftag + etag;
48:
49: myField.focus();
50:
51: }
52:
53: }
54:
55: //函数部分没有注释，我想也很少有人会去添加这个功能，更别说想去弄懂代码意思吧。有人问的时候我再解释吧。
56:
接下来还要有每个插入相应标签的函数，我就举几个例子吧
1: var myField=document.getElementById('comment')||0;
2:
3: var Editor={
4:
5: strong:function(){
6:
7: addEditor(myField,'<strong>','</strong>');//直接调用前后标签
8:
9: },
10:
11: ahref:function(){
12:
13: var URL = prompt('Enter the URL' ,'http://');//先获取输入的url地址
14:
15: if (URL) {
16:
17: addEditor(myField,'<a target="_blank" href="' + URL + '" rel="external">','</a>');
18:
19: }
20:
21: },
22:
23: img:function(){
24:
25: var myValue = prompt('Enter the URL of the image', 'http://');//获取图像地址
26:
27: if (myValue) {
28:
29: myValue = '<img src="'
30:
31: + myValue
32:
33: + '" alt="' + prompt('Enter a description of the image', '') //再取得alt值
34:
35: + '" />';
36:
37: addEditor(myField,myValue);//这里没有第三个参数了
38:
39: }
40:
41: }
42:
43: }
44:
然后就可在评论框附近调用了，样式自己根据自己博客主题定义。
1: <a class="em" title="EM Font" href="javascript:Editor.em();">EM</a>//调用加入em标签
2:
3: <a class="ahref" title="Add Link" href="javascript:Editor.ahref();">ahrefa</a>//插入a链接
4:
5: <a class="imgadd" title="Add a Image" href="javascript:Editor.img();">img</a>//插入图像
6:
大家可以在我评论框上试试， 可以用鼠标选择一段文字，再加上标签，或者直接添加标签，注意观察标签加入后光标的位置。如有bug，请及时告知于我。
注意，那个小扫帚是个格式清除，你可以选择一段需要去除格式的文字，再点一下小扫帚就可以去格式化了。
PS：我的编辑器上还有文字颜色、文字大小的处理，是因为我急着下班，忽略了<span>标签会被过滤掉，只顾一股脑赶紧都添加好下班。暂时现在也不想去掉了，以后想想还有什么标签要添加，直接替换一下就好了。
另外，有心的同学应该也注意到了，评论框右上方还有两个编辑按钮，一个是字数统计，一个是清空文字输入框，这两个功能很无意思，所以就不多说了，呵呵。不过字数统计统计的是去除html标签后的文字长度，与提交按钮右边的字符统计不同。
