javascript - 在 contentEditable div 旁边显示源代码

Question

现在，我正在尝试创建一个所见即所得的 HTML 编辑器，我需要在正在编辑的 div 旁边显示 contentEditable div 的源代码。我正在尝试自动同步这两个元素，但我还不确定最好的方法是什么。

<div contentEditable ="true" id = "showSourceCodeForThis">test 1</div>
<input type = "text" id = "showSourceCodeHere"></input>

每当更新 contentEditable div 时，我希望显示的源代码也能自动更新，反之亦然。是否可以将 contenteditable div 的内容与显示 contenteditable div 源代码的文本框同步？

Answer 1

这是一个可行的解决方案：http: //jsfiddle.net/sDdN3/14/

HTML：

<div contentEditable ="true" id = "showSourceCodeForThis">test 1</div>
<input type = "text" id = "showSourceCodeHere"></input>

JavaScript：

function test(){
    var divs = document.getElementById('showSourceCodeForThis');
        divs.onkeyup=function(event){
            document.getElementById('showSourceCodeHere').value = document.getElementById('showSourceCodeForThis').innerHTML;
        }
}

function test2(){
    var divs = document.getElementById('showSourceCodeHere');
        divs.onkeyup=function(event){
            document.getElementById('showSourceCodeForThis').innerHTML = document.getElementById('showSourceCodeHere').value;
        }
}

test();
test2();