이번에는 HTML+CSS를 사용한 실시간 미리보기가 가능한 마크다운 편집기를 가져오겠습니다. HTML+CSS를 사용하여 실시간 미리보기가 가능한 마크다운 편집기를 만들 때 주의사항은 무엇인가요? .
레이아웃 구축의 첫 번째 단계:
1. 레이아웃 구상(전체 레이아웃은 다음과 같습니다)
2. 프로젝트 아래에 새로운 index.html 페이지를 생성하고 다음 코드를 작성합니다. :
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>markdown编辑器</title> <style type="text/css"> * {margin: 0;padding: 0;outline: none;border-radius: 0; } html,body {width: 100%;height: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;background-color: #ebebeb; }#toolbar {height: 50px;background-color: #444;width: 100%;color: #fff;line-height: 50px; }#container {overflow: auto;position: absolute;bottom: 0;left: 0;right: 0;top: 50px; }#editor-column,#preview-column {width: 49.5%;height: 100%;overflow: auto;position: relative;background-color: #fff; }.pull-left {float: left; } .pull-right {float: right; }</style> </head> <body> <div id="toolbar"></div> <div id="container"> <div id="editor-column" class="pull-left"> <div id="panel-editor"> </div> </div> <div id="preview-column" class="pull-right"> <div id="panel-preview"> </div> </div> </div> </body></html>
두 번째 단계 예비 결과를 얻기 위한 리소스 소개:
1. 프로젝트 아래에 js 폴더를 만듭니다.
2. 다운로드한 압축 패키지에서 표시/lib 아래에 표시되는.js의 압축을 풀어 js 폴더에 넣습니다. 다운로드한 압축 패키지의 압축을 풀고 ace-builds/src를 js 폴더에 풀고 이름을 ace
4로 바꿉니다. js 파일을 가져옵니다
(참고: markdown.css는 마크다운 스타일 파일이므로 직접 작성하거나 다운로드할 수 있습니다) 인터넷에서(예: github-markdown-css)
<!DOCTYPE html><html> <head> <meta charset='UTF-8'> <title>markdown编辑器</title> <script src="js/jquery-2.1.4.min.js"></script> <script src="js/marked.js"></script> <script src="js/ace/ace.js"></script> <link href="markdown.css" rel="stylesheet" /> <!--略-->
5 초기화 플러그인
(편집 영역과 표시 영역 코드를 먼저 추가하세요)
<!--略-->#mdeditor#preview,#panel-editor,#panel-preview{ height: 100%; width: 100%; }</style> </head> <body> <div id='toolbar'></div> <div id='container'><div id='editor-column' class='pull-left'> <div id='panel-editor'> <!--编辑区--> <div class="editor-content" id="mdeditor" ></div> </div> </div> <div id='preview-column' class='pull-right'> <div id='panel-preview'> <!--显示区--> <div id="preview" class="markdown-body"></div> </div> </div> <!--略-->
(초기화 코드를 먼저 추가하세요)
<!--略--> var acen_edit = ace.edit('mdeditor'); acen_edit.setTheme('ace/theme/chrome'); acen_edit.getSession().setMode('ace/mode/markdown'); acen_edit.renderer.setShowPrintMargin(false); $("#mdeditor").keyup(function() { $("#preview").html(marked(acen_edit.getValue())); });
세 번째 단계는 도구 모음에 도구를 추가하는 것입니다. 예:
1. 공개 메소드 작성
(실제로 클릭 도구는 주로 편집기에 손으로 입력한 기호를 자동으로 삽입하는 데 사용됩니다)
function insertText(val){ acen_edit.insert(val);//光标位置插入 } <div id='toolbar'> <button onclick="insertText('**?**')">加粗</button> <button onclick="insertText('_?_')">斜体</button> <button onclick="insertText('>')">引用</button> .....</div>
네 번째 단계는 ace입니다. 편집기 설정 기능을 구현하는 .js API:
<div id='toolbar'> <button onclick="insertText('**?**')">加粗</button> <button onclick="insertText('_?_')">斜体</button> <button onclick="insertText('>')">引用</button>..... 设置: <select id="theme" size="1"> <optgroup label="Bright"> <option value="ace/theme/chrome">Chrome</option> <option value="ace/theme/clouds">Clouds</option> <option value="ace/theme/crimson_editor">Crimson Editor</option> <option value="ace/theme/dawn">Dawn</option> <option value="ace/theme/dreamweaver">Dreamweaver</option> <option value="ace/theme/eclipse">Eclipse</option> <option value="ace/theme/github">GitHub</option> <option value="ace/theme/iplastic">IPlastic</option> <option value="ace/theme/solarized_light">Solarized Light</option> <option value="ace/theme/textmate">TextMate</option> <option value="ace/theme/tomorrow">Tomorrow</option> <option value="ace/theme/xcode">XCode</option> <option value="ace/theme/kuroir">Kuroir</option> <option value="ace/theme/katzenmilch">KatzenMilch</option> <option value="ace/theme/sqlserver">SQL Server</option> </optgroup> <optgroup label="Dark"> <option value="ace/theme/ambiance">Ambiance</option> <option value="ace/theme/chaos">Chaos</option> <option value="ace/theme/clouds_midnight">Clouds Midnight</option> <option value="ace/theme/cobalt">Cobalt</option> <option value="ace/theme/gruvbox">Gruvbox</option> <option value="ace/theme/idle_fingers">idle Fingers</option> <option value="ace/theme/kr_theme">krTheme</option> <option value="ace/theme/merbivore">Merbivore</option> <option value="ace/theme/merbivore_soft">Merbivore Soft</option> <option value="ace/theme/mono_industrial">Mono Industrial</option> <option value="ace/theme/monokai">Monokai</option> <option value="ace/theme/pastel_on_dark">Pastel on dark</option> <option value="ace/theme/solarized_dark">Solarized Dark</option> <option value="ace/theme/terminal">Terminal</option> <option value="ace/theme/tomorrow_night">Tomorrow Night</option> <option value="ace/theme/tomorrow_night_blue">Tomorrow Night Blue</option> <option value="ace/theme/tomorrow_night_bright">Tomorrow Night Bright</option> <option value="ace/theme/tomorrow_night_eighties">Tomorrow Night 80s</option> <option value="ace/theme/twilight">Twilight</option> <option value="ace/theme/vibrant_ink">Vibrant Ink</option> </optgroup> </select>字体大小 <select id="fontsize" size="1"> <option value="10px">10px</option> <option value="11px">11px</option> <option value="12px" selected="selected">12px</option> <option value="13px">13px</option> <option value="14px">14px</option> <option value="16px">16px</option> <option value="18px">18px</option> <option value="20px">20px</option> <option value="24px">24px</option> </select>代码折行 <select id="folding" size="1"> <option value="manual">manual</option> <option value="markbegin" selected="selected">mark begin</option> <option value="markbeginend">mark begin and end</option> </select>自动换行 <select id="soft_wrap" size="1"> <option value="off">Off</option> <option value="40">40 Chars</option> <option value="80">80 Chars</option> <option value="free">Free</option> </select>全选样式 <input type="checkbox" name="select_style" id="select_style" checked="">光标行高光 <input type="checkbox" name="highlight_active" id="highlight_active" checked="">显示行号 <input type="checkbox" id="show_gutter" checked="">打印边距 <input type="checkbox" id="show_print_margin" checked=""></div>
<!---略---> ...... $("#theme").change(function() { acen_edit.setTheme($(this).val()); }) $("#fontsize").change(function() { acen_edit.setFontSize($(this).val()); }) $("#folding").change(function() { session.setFoldStyle($(this).val()); }) $("#select_style").change(function() { acen_edit.setOption("selectionStyle", this.checked ? "line" : "text"); }) $("#highlight_active").change(function() { acen_edit.setHighlightActiveLine(this.checked); }) $("#soft_wrap").change(function() { acen_edit.setOption("wrap", $(this).val()); }) $("#show_print_margin").change(function() { acen_edit.renderer.setShowPrintMargin(this.checked); })
이 기사의 사례를 읽으신 후 완전히 마스터하셨다고 믿습니다. 방법, 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!
관련 자료:
js 정규 표현식의 10가지 응용 예 Vue.js 2.0 백그라운드 시스템 실제 사례위 내용은 HTML+CSS를 사용하여 실시간 미리보기 마크다운 편집기 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!