为评论框添加文字格式化编辑器
下午快下班时昏昏欲睡，在浏览一论坛时忽然看到输入框上的编辑器，于是精神一振，花了一个小时也给博客加入了这个功能。
之前有过这样的想法，并且上网找过这方面的代码，貌似很多人用的是一款焦作quicktags什么的编辑器。但是这个太大，足足快20KB了，实在是太臃肿了。
所以我就自己写了。代码也不多，顺便也把表情添加和这个整合到一起了。当然，功能上也许就没quicktags全面了。
其实JavaScript代码不难写，难点主要在与体验方面，比如鼠标光标的位置，对于选择的字符的处理以及处理后光标返回的位置。
我的代码遵寻以下几点效果：
- 对于普通的加粗（<strong>）、倾斜（<em>）等，如果鼠标没有选择文字，则直接在光标位置处加上完整闭合的标签。然后光标定位到标签中间，方便直接在标签中写入文字。
- 对于用鼠标选择了一段文字的，则在原位置返回经过格式化后的文字。然后光标定位到闭合标签后面。
- 链接、图片则需要在弹出窗口中输入相应的链接地址及alt等。
我定义了一个插入编辑器的函数，有三个参数，前两个必须，最后一个etag可选（比如img就没有后半部标签）：
/**
* @return void
* @param myField 输入框对象
* @param ftag 标签前半部分，如<strong>
* @param etag 标签后半部分，如</strong>
*/
function addEditor(myField,ftag,etag){
if (document.selection) {
myField.focus();
sel = document.selection.createRange();
etag ? sel.text = ftag + sel.text + etag : sel.text = ftag;
myField.focus();
} else if (myField.selectionStart || myField.selectionStart == '0') {
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
var cursorPos = endPos;
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);
etag ? cursorPos += ftag.length + etag.length : cursorPos += ftag.length - endPos + startPos;
if(startPos == endPos && etag)cursorPos -= etag.length;
myField.focus();
myField.selectionStart = cursorPos;
myField.selectionEnd = cursorPos
} else {
myField.value += ftag + etag;
myField.focus();
}
}
//函数部分没有注释，我想也很少有人会去添加这个功能，更别说想去弄懂代码意思吧。有人问的时候我再解释吧。
接下来还要有每个插入相应标签的函数，我就举几个例子吧
var myField=document.getElementById('comment')||0;
var Editor={
strong:function(){
addEditor(myField,'<strong>','</strong>');//直接调用前后标签
},
ahref:function(){
var URL = prompt('Enter the URL' ,'http://');//先获取输入的url地址
if (URL) {
addEditor(myField,'<a target="_blank" href="' + URL + '" rel="external">','</a>');
}
},
img:function(){
var myValue = prompt('Enter the URL of the image', 'http://');//获取图像地址
if (myValue) {
myValue = '<img src="'
+ myValue
+ '" alt="' + prompt('Enter a description of the image', '') //再取得alt值
+ '" />';
addEditor(myField,myValue);//这里没有第三个参数了
}
}
}
然后就可在评论框附近调用了，样式自己根据自己博客主题定义。
<a class="em" title="EM Font" href="javascript:Editor.em();">EM</a>//调用加入em标签
<a class="ahref" title="Add Link" href="javascript:Editor.ahref();">ahrefa</a>//插入a链接
<a class="imgadd" title="Add a Image" href="javascript:Editor.img();">img</a>//插入图像
大家可以在我评论框上试试， 可以用鼠标选择一段文字，再加上标签，或者直接添加标签，注意观察标签加入后光标的位置。如有bug，请及时告知于我。
注意，那个小扫帚是个格式清除，你可以选择一段需要去除格式的文字，再点一下小扫帚就可以去格式化了。
PS：我的编辑器上还有文字颜色、文字大小的处理，是因为我急着下班，忽略了<span>标签会被过滤掉，只顾一股脑赶紧都添加好下班。暂时现在也不想去掉了，以后想想还有什么标签要添加，直接替换一下就好了。
另外，有心的同学应该也注意到了，评论框右上方还有两个编辑按钮，一个是字数统计，一个是清空文字输入框，这两个功能很无意思，所以就不多说了，呵呵。不过字数统计统计的是去除html标签后的文字长度，与提交按钮右边的字符统计不同。
Post url: http://qiqi.boy.im/5l. You can ReTweet This Post.
80 Responses to this post.
Comments (77) Trackbacks (3)[...] @QiQiBoY 额，要不你就用[img]标签吧 ~ 写一个函数在输出显示的时候替换为《img标签 [...]
[...] 前两天我写过一篇《为评论框添加文字格式化编辑器 》，其中zwwoOoOo在留言中说希望有一种可以转换“<”为html实体符号的方法，所以我给了他一段可以将选中的文字中的“<”转换为“<”的js代码。 [...]
[...] 为评论框添加文字格式化编辑器 [...]