用js写一个简书编辑器

作者: 编码的哲哲 | 来源:发表于2016-08-04 20:45 被阅读245次

由于时间关系，老夫只贴出启发式demo，能否参悟还看个人造化。

<pre>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding:0;
margin: 0;}
.box{

        position: relative;
    }
    #mazhe{
        position: absolute;
        z-index: 2;     
        width: 100%;
        height: 1000px;
        font-size: 20px;
        opacity: 0;
    }
    #lz{            
        color: red;
        position: absolute;
        z-index: 1;
        font-size:20px;
    }
</style>

</head>
<body>
<div class="box">
<textarea id='mazhe' onkeydown="change()" onkeyup="change()"></textarea>
<div id='lz'></div>
</div>
<script>
var textarea = document.getElementById('mazhe');
var div = document.getElementById('lz');
var change = function(){
div.innerHTML = textarea.value;
}
</script>
</body>
</html>
</pre>