질문 상자와 미리보기

StackOverflow https://stackoverflow.com/questions/1124222

  •  13-09-2019
  •  | 
  •  

문제

이 질문은 이것을 기반으로합니다 메타에 실.

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 -Part가 어떻게 만들어 졌는지 잘 모르겠습니다. 나는 내 파이어 버그에서 그것을 찾지 못했다. 함수의 이름은 8.

요컨대, So의 질문 상자와 미리보기의 JS는 어떻게 구축됩니까?

도움이 되었습니까?

해결책

편집기 코드는이 JS 파일에서 제공됩니다.

이 파일의 소스는 여기에서 볼 수있는 WMD 편집기의 stackoverflow 포크입니다. http://github.com/derobins/wmd/tree/master

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top