为了给社区加上同样的功能，花了一点时间实现了QQ空间的评论框，有想学习编辑器的实现原理的朋友，可以认真阅读代码。需要包含jQuery。
这个编辑框可以在任意位置输入@时，弹出@人名的补全内容，并且只有@正确的人名，才会给服务器端生成数据。删除时，也是一次删掉人名，不会发生@joson 退格一下变成 @joso 这种。 可以给用户不会出错的愉快体验。
var commentEditor = function(id){ this.editorContainer = $('#'+id); this.editorPlaceholder = $('<div class="comment_editor_placeholder"></div>'); this.editor = $('<div class="comment_editor_main"></div>'); this.currentEl = null; this.currentOffset = null; this.offsetLeft = 0; this.editorStatus = 0; this.op = { placeholder : '在这里输入评论', padding : 5 }; this.editorPlaceholder.css({ width : this.editorContainer.width() - this.op.padding*2, height : this.editorContainer.height() - this.op.padding*2, position:'relative' }); this.editor.css({ overflow : 'auto', width : this.editorContainer.width() - this.op.padding*2, height : this.editorContainer.height() - this.op.padding*2, position:'relative', marginTop : -this.editorContainer.height() }); this.editor.attr('contenteditable',true); this.editorContainer.append(this.editorPlaceholder); this.editorContainer.append(this.editor); this.editorPlaceholder.text(this.op.placeholder); this.editorContainer.addClass('comment_editor'); if( this.getData() != '' ){ this.editorPlaceholder.text(''); } this.list = new commentEditor.downList(this); this._init(); this.listenAt();};
commentEditor.prototype = { _init : function(){ var self = this; this.listenChange(); $(document).bind('click',function(){ self.list.hide(); if( self.editorStatus == 1 ){ self.editorStatus = 0; self.editor.trigger('editor.close');} }); this.editor.bind('click',function(e){ e.stopPropagation(); }); this.editor.bind('editor.change',function(){ self.listenCursor(); }); this.editor.bind('mouseup',function(){ self.listenCursor(); }); this.editor.bind('focus',function(){ self.editorPlaceholder.text(''); if( self.editorStatus == 0 ){ self.editorStatus = 1; self.editor.trigger('editor.open');} }); this.editor.bind('blur',function(){ if( self.getData() == '' ){ self.editorPlaceholder.text(self.op.placeholder); }}); }, listenAt : function(){ var self = this,timeout=null,currentname=null; this.editor.bind('editor.at',function(e,data){ self.offsetLeft = String(data).length + 1 ; clearTimeout(timeout); if( currentname == data ){ self.list.show(); return ; } currentname = data; timeout = setTimeout(function(){$.post('/test_comment_exe.php',{action:'at',name:data},function(data){if( data != '' ){ self.list.show(); self.list.setData(data,function(data){ var op = $('<div><a href="javascript:">\ <div style="float:left;width:30px;height:30px;"><img src="/profile_image/'+data.ID+'/30" width="30" height="30" /></div>\ <div style="float:left; margin-left:10px;">'+data.user_nicename+'</div></a>\ </div>'); op.bind('click',function(){ self.insertHtml('<button contenteditable="false" class="comment_editor_element">@'+data.user_nicename+'</button>',true); self.list.hide(); }); return op; });}else{ self.list.hide();}}); },100); }); this.editor.bind('editor.at_close',function(){ clearTimeout(timeout); self.list.hide(); }); }, listenChange : function(){ var self = this,oldText=this.editor.html(); this.editor.bind('keyup',function(e){ var newText = self.editor.html(); if( newText != oldText ){ oldText = newText; self.editor.trigger('editor.change'); } }); }, getSelectionObject : function(){ if (window.getSelection){ // mozilla FF return window.getSelection(); }else if (document.getSelection){ return document.getSelection(); }else if (document.selection){ //IE return document.selection.createRange().text; } }, getRangeObject : function(selectionObject) { return selectionObject.getRangeAt(0); }, listenCursor : function(){ var userSelection = this.getSelectionObject(); if( !userSelection.anchorNode.data || userSelection.type == 'None' || userSelection.type == 'Range' ){ this.editor.trigger('editor.at_close'); return ; } this.currentOffset = userSelection.anchorOffset; this.currentEl = userSelection.anchorNode; var prevText = userSelection.anchorNode.data.substring( 0, userSelection.anchorOffset ); var lastDot = prevText.lastIndexOf('@'); if( lastDot != -1 ){ prevText = prevText.substring(lastDot); if( !prevText.match(/\s/) ){ this.editor.trigger('editor.at',[ prevText.substring(1)]); return ;}else if( prevText.match(/^[^\s]+\s$/) ){ this.editor.trigger('editor.at_apply',[prevText.substring(1,prevText.length-1)]); } } this.editor.trigger('editor.at_close'); }, insertHtml : function(html,lastspace){ var offsetLeft = this.offsetLeft; this.offsetLeft = 0; if( this.currentEl != null && this.currentOffset != null ){ this.editor.focus(); var userSelection = this.getSelectionObject(); var range = this.getRangeObject(userSelection); var el = $(html); var el_dom = el.get(0); if( !el_dom ){ el_dom = document.createTextNode(html); } range.setStart(this.currentEl,this.currentOffset - offsetLeft ); range.setEnd(this.currentEl,this.currentOffset ); range.deleteContents();range.insertNode( el_dom ); range.setStartAfter( el_dom, 0 ); range.setEndAfter( el_dom , 0 ); if(lastspace){ var space = document.createTextNode('\u00A0'); range.insertNode( space ); range.setStartAfter( space, 0 ); range.setEndAfter( space , 0 ); } if( navigator.userAgent.indexOf('Chrome') != -1 ){ if( el_dom.nextSibling == el_dom.parentNode.lastChild && el_dom.nextSibling.data==''){ range.insertNode($('<br/>').get(0)); } } if( userSelection.setPosition ) userSelection.setPosition(range.startContainer,range.startOffset); else{ var nrange = this.getRangeObject(userSelection); nrange.setStart(range.startContainer,range.startOffset); nrange.setEnd(range.startContainer,range.startOffset); userSelection.removeAllRanges(); userSelection.addRange(nrange); } this.currentOffset = range.startOffset; this.currentEl = range.startContainer;}else{ //console.log( $(html) ); this.editor.html( this.editor.html() + html ); this.editor.focus(); var userSelection = this.getSelectionObject(); var range = this.getRangeObject(userSelection); range.setStartAfter( this.editor.get(0).lastChild, 0 ); range.setEndAfter( this.editor.get(0).lastChild, 0 ); if( userSelection.setPosition ){ userSelection.setPosition(range.startContainer,range.startOffset); }else{ var nrange = this.getRangeObject(userSelection); nrange.setStart(range.startContainer,range.startOffset); nrange.setEnd(range.startContainer,range.startOffset); userSelection.removeAllRanges(); userSelection.addRange(nrange); } this.currentOffset = range.startOffset; this.currentEl = range.startContainer;} }, getData : function(){ return this.editor.html(); }, bind : function(eventName,callback){ this.editor.bind(eventName,callback); }};
commentEditor.downList = function(container){ this.container = container; this.list = $('<div class="comment_editor_list"></div>'); this.list.css({ position:'absolute', width: this.container.editor.width()+this.container.op.padding*2 - 2, top:this.container.editor.offset().top + this.container.editor.height()+this.container.op.padding*2, left:this.container.editor.offset().left }); this.status = 'show'; this.list.hide(); $(document.body).append(this.list); this.list.bind('click',function(e){ e.stopPropagation(); }); };
commentEditor.downList.prototype = { show : function(){ this.status = 'show'; this.list.show(); }, hide : function(){ this.list.hide(); }, setData : function(data,callback){ var self = this; this.list.find('*').remove(); var data = $.parseJSON(data); if(data){ $.each(data,function(i){ if(callback) self.list.append(callback(data[i])); }); } } };
