<html>
<head>
<title></title>
<script type="text/javascript">
function changeIt(){
//alert('yes');
var content = document.getElementById("content");
var InputBox = document.getElementById("InputBox");
var Mytext;
Mytext=InputBox.innerHTML;
Mytext=Mytext.replace(/</g,"<");
Mytext=Mytext.replace(/>/g,">");
content.innerHTML=Mytext;
}
</script>
</head>
<body>
<p contenteditable="true"
id="InputBox"
onkeydown="changeIt();">
here...
</p>
<p id="content"></p>
</body>
</html>
------------------------------
下面的是css編輯器
| |
<html> |
| |
<head> |
| |
<title>css測試器</title> |
| |
<style> |
| |
#top{ |
| |
height:200px; |
| |
} |
| |
style{ |
| |
display:block; |
| |
padding:0.6em 0.8em; |
| |
border:1px dashed #ccc; |
| |
background-color:#f5f5f5; |
| |
color:#000; |
| |
font-family:Monaco, |
| |
monospace; |
| |
font-size:12px; |
| |
white-space:pre-wrap; |
| |
word-wrap:break-word;} |
| |
} |
| |
</style> |
| |
</head> |
| |
<body> |
| |
<div id="top"> |
| |
<style contenteditable> |
| |
*{color: #f00; } |
| |
</style> |
| |
</div> |
| |
<div id="bottom"> |
| |
aaaaa |
| |
</div> |
| |
</body> |
| |
</html> |