这个问题基于Meta 中的这个线程。
我想离线访问 SO 的编辑器及其预览，以便我可以快速输入。
编辑
我找到了问题框的以下HTML。
<div class="resizable-textarea" id="wmd-container">
<div id="wmd-button-bar"><ul id="wmd-button-row"><li class="wmd-button" id="wmd-bold-button" title="Strong <strong> Ctrl+B" style="background-position: 0px 0px;"/><li class="wmd-button" id="wmd-italic-button" title="Emphasis <em> Ctrl+I" style="background-position: -20px 0px;"/><li class="wmd-spacer" id="wmd-spacer1"/><li class="wmd-button" id="wmd-link-button" title="Hyperlink <a> Ctrl+L" style="background-position: -40px 0px;"/><li class="wmd-button" id="wmd-quote-button" title="Blockquote <blockquote> Ctrl+Q" style="background-position: -60px 0px;"/><li class="wmd-button" id="wmd-code-button" title="Code Sample <pre><code> Ctrl+K" style="background-position: -80px 0px;"/><li class="wmd-button" id="wmd-image-button" title="Image <img> Ctrl+G" style="background-position: -100px 0px;"/><li class="wmd-spacer" id="wmd-spacer2"/><li class="wmd-button" id="wmd-olist-button" title="Numbered List <ol> Ctrl+O" style="background-position: -120px 0px;"/><li class="wmd-button" id="wmd-ulist-button" title="Bulleted List <ul> Ctrl+U" style="background-position: -140px 0px;"/><li class="wmd-button" id="wmd-heading-button" title="Heading <h1>/<h2> Ctrl+H" style="background-position: -160px 0px;"/><li class="wmd-button" id="wmd-hr-button" title="Horizontal Rule <hr> Ctrl+R" style="background-position: -180px 0px;"/><li class="wmd-spacer" id="wmd-spacer3"/><li class="wmd-button" id="wmd-undo-button" title="Undo - Ctrl+Z" style="background-position: -200px 0px;"/><li class="wmd-button" id="wmd-redo-button" title="Redo - Ctrl+Shift+Z" style="background-position: -220px -20px;"/><li class="wmd-button" id="wmd-help-button" style="background-position: -240px 0px;"><a href="/editing-help" target="_blank" title="Markdown Editing Help"/></li></ul></div>
<textarea tabindex="101" rows="15" cols="92" name="post-text" id="wmd-input" class="processed"/>
<span class="form-error"/>
<div class="grippie" style="margin-right: 79px;"/></div>
CSS
#wmd-input {
height:240px;
line-height:1.2;
padding:3px;
}
textarea {
border:1px solid #999999;
font-family:Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;
font-size:90%;
}
预览
HTML
<div id="wnd-preview">
CSS
#wmd-preview {
background-color:#E0EAF1;
border:2px dotted #FFFFFF;
clear:both;
font-size:107%;
line-height:130%;
margin-top:14px;
padding:3px;
width:660px;
}
我不确定 JS 部分是如何构建的。我没有从我的 Firebug 中找到它。似乎函数的名称是8.
总之，SO的问题框和预览的JS是怎么搭建的？