Question

现在，我正在尝试创建一个WYSIWYG 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();

在contentEditable div旁边显示源代码

1 个答案: