DOM
结构
首先,先上效果图:
首先说明一下,本文的一些细节或者技巧是建立在我的另外一篇文章上的,如果你在读的过程中,有什么地方不太清楚的,可以先去看看那篇文章,或许可以找到答案。
左侧是 markdown
输入框,右侧是对应的 markdown
输出即时预览框,两个元素框可以相互跟随滚动。
由效果图可以基本确定,整个页面大概分为三个大块,顶部的 header
标题输入框、主体左侧 markdown
输入框、主体右侧 markdown
即时预览框。
于是,可以很快速地写下 DOM
:
render() {
return [
<header key='header'>
<input type="text" placeholder="输入文章标题..." spellCheck="false"/>
</header>,
<div key='main'>
<div>
<div contentEditable="plaintext-only"></div>
</div>
<div>