Show source code next to contentEditable div

Question

Right now, I'm trying to create a WYSIWYG HTML editor, and I need to display the source code of a contentEditable div next to the div that is being edited. I'm trying to automatically synchronize these two elements, and I'm not yet sure what the best approach would be.

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

Whenever the contentEditable div is updated, I want the displayed source code to be automatically updated as well, and vice-versa. Is it possible to synchronize the contents of a contenteditable div with a text box that shows the source code of the contenteditable div?

http://stackoverflow.com/a/8694125/96100 – Tim Down Apr 14 '13 at 23:20 — Tim Down, Apr 14 '13 at 23:20

score 0 · Answer 1 · answered Apr 13 '13 at 18:45

Here is one working solution: 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();

Show source code next to contentEditable div

1 Answers1