function set_focus()
{
el=document.getElementById('guestbook_editor')
//el=el[0] //jquery 对象转dom对象
el.focus()
if($.support.msie)
{
var range = document.selection.createRange()
this.last = range
range.moveToElementText(el)
range.select()
document.selection.empty()//取消选中
}
else
{
var range = document.createRange()
range.selectNodeContents(el)
range.collapse(false)
var sel = window.getSelection()
sel.removeAllRanges()
sel.addRange(range)
}
}
调用此方法，可以将光标放在可编辑div的最后。
1.给用作富文本编辑的div添加contenteditable属性。<div id="editor" contenteditable="true"></div>
2.给表情图片添加click事件（我是把img表情放在li下的），div获取焦点，_insertimg()锁定编辑器中光标的位置，参数是img，也可以是文本。
$("#Modal .emoji-list li").click(function(event) {
var emoji = $(this).find("img").attr('src')
$("#editor").focus()
var source = '<img src="'+emoji+'">'
_insertimg(source)
})
function _insertimg(str){
var selection= window.getSelection ? window.getSelection() : document.selection
var range= selection.createRange ? selection.createRange() : selection.getRangeAt(0)
if (!window.getSelection){
document.getElementById('editor').focus()
var selection= window.getSelection ? window.getSelection() : document.selection
var range= selection.createRange ? selection.createRange() : selection.getRangeAt(0)
range.pasteHTML(str)
range.collapse(false)
range.select()
}
else{
document.getElementById('editor').focus()
range.collapse(false)
var hasR = range.createContextualFragment(str)
var hasR_lastChild = hasR.lastChild
while (hasR_lastChild &&hasR_lastChild.nodeName.toLowerCase() == "br" &&hasR_lastChild.previousSibling &&hasR_lastChild.previousSibling.nodeName.toLowerCase() == "br") {
var e = hasR_lastChild
hasR_lastChild = hasR_lastChild.previousSibling
hasR.removeChild(e)
}
range.insertNode(hasR)
if (hasR_lastChild) {
range.setEndAfter(hasR_lastChild)
range.setStartAfter(hasR_lastChild)
}
selection.removeAllRanges()
selection.addRange(range)
}
}
首先要实现输入内容不同颜色是可以实现的，比如使用一个可编辑iframe就可以了，textarea是不行的。至于功能的实现，我觉得不需要获取结束位置。
首先检测鼠标事件，如果有点击编辑区的某个位置，你就获取当前鼠标的落点，然后用innerHTML加入一对标签，<span class="color:#XXXXXX"></span>，所有输入内容都在这个span中间。效果就是输入的所有文字都变色。
不知道楼主明白没？
