PDA

View Full Version : html editor div run html



keyboard
02-08-2012, 11:50 PM
<html>
<head>
<title>
Html Editor
</title>
<style type="text/css">
#window1 p {
margin: 0;
}
#window2 p {
margin: 0;
}
</style>
<script type="text/javascript">
function clearwindow1(){
var window1contents = document.getElementById('window1').innerHTML;
var window2contents = document.getElementById('window2').innerHTML;
if(window1contents == "<I>Edit Window</I>"){
document.getElementById('window1').innerHTML = "";
}
if(window2contents == "<I>Viewing Window</I>"){
document.getElementById('window2').innerHTML = "";
}
}
function transfer(){
var window1contents = document.getElementById('window1').innerHTML;
document.getElementById('window2').innerHTML = window1contents;
}
function reset(){
document.getElementById('window1').innerHTML = "<i>Edit Window</i>";
document.getElementById('window2').innerHTML = "<i>Viewing Window</i>";
}
</script>
</head>
<body style="background-color:grey;">
<div style="float:left; width:200px; height:60%; background-color:grey;"></div>
<div style="float:left; width:33.3%; height:60%; background-color:white; border: 3px darkgrey solid;" id="window1" onclick="clearwindow1()" onkeyup="transfer()" contenteditable><i>Edit Window</i></div>
<div style="float:left; width:300px; height:60%; background-color:grey;"></div>
<div style="float:left; width:33.3%; height:60%; background-color:white; border: 3px darkgrey solid;" id="window2"><i>Viewing Window</i></div>
<div style="float:left; width:200px; height:60%; background-color:grey;"></div>
<br />
<input type="button" value="Reset" onclick="reset()">
</body>
</html>


That's my current code.
Is there a way to make the text inserted into the div window1 run as html.

For instance, if you typed

<a href="http://www.google.com">Google</a>

into window1 it would show up as

http://www.google.com

in window 2

Keyboard1333