0

現在、WYSIWYG HTML エディターを作成しようとしており、編集中の div の隣に contentEditable div のソース コードを表示する必要があります。私はこれら 2 つの要素を自動的に同期させようとしていますが、最善のアプローチが何であるかはまだわかりません。

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

contentEditable div が更新されるたびに、表示されるソース コードも自動的に更新され、その逆も同様です。contenteditable div の内容を、contenteditable div のソース コードを表示するテキスト ボックスと同期することはできますか?

4

1 に答える 1

0

ここに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();
于 2013-04-13T18:45:37.887 に答える