编辑器问题：保持div和textarea同步？？？？？

[巴山虎]

尝试学做编辑器，div作为显示框，textarea隐藏接受数据。

但是发现一些问题，操作不同步，其中一个内容变了，但另外一个不变。

比如插入“aaa”，textarea获取“aaa”，显示到DIV上面来。如果我删除掉，那么div的“aaa”会被清空，但是textarea的还在。

这样的问题怎么处理？？

[码无边]

贴出你代码看看

[斯洛文尼亚旅游]

可编辑的div支持blur事件，blur的时候更新下textarea的值

<div style="height:200px;width:350px;border:solid 1px #000" contenteditable="true" onblur="document.getElementById('ta').value=this.innerHTML"></div>
<textarea id="ta" cols="50" rows="5"></textarea>

要实时更新onblur改为onkeyup事件，不过觉得没必要。。

[巴山虎]

可能是我写错的了。 我是点击一个按钮，赋值到textarea，再显示到div。这样在div操作的时候，textarea无法同步捕捉结果。 如果是直接赋值到div，再通过blur事件等传递到textarea，应该没有这样的问题。 不过光标插入函数在textarea好用，但在div不好用，插入失败。 选哪种路子呢？？不知道有没有好的源码？

[巴山虎]

<script>
(function($){
$.fn.fheditor=function(ops){
tt=$(this);
var ttw=tt.width();
var tth=tt.height();

var sets={
fhstats:"0",words:"0"
}
var newsets=$.extend(sets,ops);

var  editdiv=$("<div id='editdiv' contentEditable=true></div>").height(tth).width(ttw).css("border","1px solid #ddd");

var  editval=editdiv.html();

tt.hide().after(editdiv);


var t_bold=$("<div class='tooldivs_bold' id='t_bold'></div>").click(function(){tt.setCaret();tt.insertAtCaret("<b>name</b>");
editdiv.html(tt.val())
});
}


})(jQuery);

//range
jQuery.extend({ 
    /**
     * 清除当前选择内容
     */ 
    unselectContents: function(){ 
        if(window.getSelection) 
            window.getSelection().removeAllRanges(); 
        else if(document.selection) 
            document.selection.empty(); 
    } 
}); 
jQuery.fn.extend({ 
    /**
     * 选中内容
     */ 
    selectContents: function(){ 
        $(this).each(function(i){ 
            var node = this; 
            var selection, range, doc, win; 
            if ((doc = node.ownerDocument) && 
                (win = doc.defaultView) && 
                typeof win.getSelection != 'undefined' && 
                typeof doc.createRange != 'undefined' && 
                (selection = window.getSelection()) && 
                typeof selection.removeAllRanges != 'undefined') 
            { 
                range = doc.createRange(); 
                range.selectNode(node); 
                if(i == 0){ 
                    selection.removeAllRanges(); 
                } 
                selection.addRange(range); 
            } 
            else if (document.body && 
                typeof document.body.createTextRange != 'undefined' && 
                (range = document.body.createTextRange())) 
            { 
                range.moveToElementText(node); 
                range.select(); 
            } 
        }); 
    }, 
    /**
     * 初始化对象以支持光标处插入内容
     */ 
    setCaret: function(){ 
        if(!$.browser.msie) return; 
        var initSetCaret = function(){ 
            var textObj = $(this).get(0); 
            textObj.caretPos = document.selection.createRange().duplicate(); 
        }; 
        $(this) 
            .click(initSetCaret) 
            .select(initSetCaret) 
            .keyup(initSetCaret); 
    }, 
    /**
     * 在当前对象光标处插入指定的内容
     */ 
    insertAtCaret: function(textFeildValue){ 
        var textObj = $(this).get(0); 
        if(document.all && textObj.createTextRange && textObj.caretPos){ 
            var caretPos=textObj.caretPos; 
            caretPos.text = caretPos.text.charAt(caretPos.text.length-1) == '' ? 
                textFeildValue+'' : textFeildValue; 
        } 
        else if(textObj.setSelectionRange){ 
            var rangeStart=textObj.selectionStart; 
            var rangeEnd=textObj.selectionEnd; 
            var tempStr1=textObj.value.substring(0,rangeStart); 
            var tempStr2=textObj.value.substring(rangeEnd); 
            textObj.value=tempStr1+textFeildValue+tempStr2; 
            textObj.focus(); 
            var len=textFeildValue.length; 
            textObj.setSelectionRange(rangeStart+len,rangeStart+len); 
            textObj.blur(); 
        } 
        else { 
            textObj.value+=textFeildValue; 
        } 
    } 
});


</script>

[巴山虎]

var t_bold=$("<div class='tooldivs_bold' id='t_bold'></div>").click(function(){<span style="color: #800000;">tt.setCaret();tt.insertAtCaret("<b>name</b>")</span>; <span style="color: #FF0000;">editdiv.html(tt.val())</span> 上面是代码 关键部分加颜色失败，重发。