溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

怎么用HTML+CSS做實(shí)時(shí)預(yù)覽的markdown編輯器

發(fā)布時(shí)間：2022-03-11 15:47:46 來源：億速云 閱讀：464 作者：iii 欄目：web開發(fā)

這篇文章主要講解了“怎么用HTML+CSS做實(shí)時(shí)預(yù)覽的markdown編輯器”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“怎么用HTML+CSS做實(shí)時(shí)預(yù)覽的markdown編輯器”吧！

　　<!DOCTYPEhtml><html>

　　<head>

　　<metacharset="UTF-8">

　　<title>markdown編輯器</title>

　　<styletype="text/css">

　　*{margin:0;padding:0;outline:none;border-radius:0;

　　}

　　html,body{width:100%;height:100%;font-family:"HelveticaNeue",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>

　　<divid="toolbar"></div>

　　<divid="container">

　　<divid="editor-column"class="pull-left">

　　<divid="panel-editor">

　　</div>

　　</div>

　　<divid="preview-column"class="pull-right">

　　<divid="panel-preview">

　　</div>

　　</div>

　　</div>

　　</body></html>

　　第二步引入資源實(shí)現(xiàn)初步效果:

　　1.項(xiàng)目下創(chuàng)建js文件夾

　　2.解從下載好的壓縮包解marked/lib下的marked.js到j(luò)s文件夾

　　3.解從下載好的壓縮包解ace-builds/src到j(luò)s文件夾重命名為ace

　　4.引入js文件

　　(注:markdown.css是markdown樣式文件,可以自行編寫或從網(wǎng)上下載比如:github-markdown-css)

　　<!DOCTYPEhtml><html>

　　<head>

　　<metacharset='UTF-8'>

　　<title>markdown編輯器</title>

　　<scriptsrc="js/jquery-2.1.4.min.js"></script>

　　<scriptsrc="js/marked.js"></script>

　　<scriptsrc="js/ace/ace.js"></script>

　　<linkhref="markdown.css"rel="stylesheet"/>

　　<!--略-->

　　5初始化插件

　　(先添加編輯區(qū)和顯示區(qū)代碼)

　　<!--略-->#mdeditor#preview,#panel-editor,#panel-preview{

　　height:100%;

　　width:100%;

　　}</style>

　　</head>

　　<body>

　　<divid='toolbar'></div>

　　<divid='container'><divid='editor-column'class='pull-left'>

　　<divid='panel-editor'>

　　<!--編輯區(qū)-->

　　<divclass="editor-content"id="mdeditor"></div>

　　</div>

　　</div>

　　<divid='preview-column'class='pull-right'>

　　<divid='panel-preview'>

　　<!--顯示區(qū)-->

　　<divid="preview"class="markdown-body"></div>

　　</div>

　　</div>

　　<!--略-->

　　(先添加初始化代碼)

　　<!--略-->

　　varacen_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.編寫公用方法

　　(其實(shí)點(diǎn)擊工具主要是在編輯器里自動(dòng)插入本來手打的符號(hào))

　　functioninsertText(val){

　　acen_edit.insert(val);//光標(biāo)位置插入

　　}

　　<divid='toolbar'>

　　<buttononclick="insertText('**?**')">加粗</button>

　　<buttononclick="insertText('_?_')">斜體</button>

　　<buttononclick="insertText('>')">引用</button>

　　.....</div>

　　第四步ace.jsAPI實(shí)現(xiàn)編輯器設(shè)置功能:

　　<divid='toolbar'>

　　<buttononclick="insertText('**?**')">加粗</button>

　　<buttononclick="insertText('_?_')">斜體</button>

　　<buttononclick="insertText('>')">引用</button>.....設(shè)置:<selectid="theme"size="1">

　　<optgrouplabel="Bright">

　　<optionvalue="ace/theme/chrome">Chrome</option>

　　<optionvalue="ace/theme/clouds">Clouds</option>

　　<optionvalue="ace/theme/crimson_editor">CrimsonEditor</option>

　　<optionvalue="ace/theme/dawn">Dawn</option>

　　<optionvalue="ace/theme/dreamweaver">Dreamweaver</option>

　　<optionvalue="ace/theme/eclipse">Eclipse</option>

　　<optionvalue="ace/theme/github">GitHub</option>

　　<optionvalue="ace/theme/iplastic">IPlastic</option>

　　<optionvalue="ace/theme/solarized_light">SolarizedLight</option>

　　<optionvalue="ace/theme/textmate">TextMate</option>

　　<optionvalue="ace/theme/tomorrow">Tomorrow</option>

　　<optionvalue="ace/theme/xcode">XCode</option>

　　<optionvalue="ace/theme/kuroir">Kuroir</option>

　　<optionvalue="ace/theme/katzenmilch">KatzenMilch</option>

　　<optionvalue="ace/theme/sqlserver">SQLServer</option>

　　</optgroup>

　　<optgrouplabel="Dark">

　　<optionvalue="ace/theme/ambiance">Ambiance</option>

　　<optionvalue="ace/theme/chaos">Chaos</option>

　　<optionvalue="ace/theme/clouds_midnight">CloudsMidnight</option>

　　<optionvalue="ace/theme/cobalt">Cobalt</option>

　　<optionvalue="ace/theme/gruvbox">Gruvbox</option>

　　<optionvalue="ace/theme/idle_fingers">idleFingers</option>

　　<optionvalue="ace/theme/kr_theme">krTheme</option>

　　<optionvalue="ace/theme/merbivore">Merbivore</option>

　　<optionvalue="ace/theme/merbivore_soft">MerbivoreSoft</option>

　　<optionvalue="ace/theme/mono_industrial">MonoIndustrial</option>

　　<optionvalue="ace/theme/monokai">Monokai</option>

　　<optionvalue="ace/theme/pastel_on_dark">Pastelondark</option>

　　<optionvalue="ace/theme/solarized_dark">SolarizedDark</option>

　　<optionvalue="ace/theme/terminal">Terminal</option>

　　<optionvalue="ace/theme/tomorrow_night">TomorrowNight</option>

　　<optionvalue="ace/theme/tomorrow_night_blue">TomorrowNightBlue</option>

　　<optionvalue="ace/theme/tomorrow_night_bright">TomorrowNightBright</option>

　　<optionvalue="ace/theme/tomorrow_night_eighties">TomorrowNight80s</option>

　　<optionvalue="ace/theme/twilight">Twilight</option>

　　<optionvalue="ace/theme/vibrant_ink">VibrantInk</option>

　　</optgroup>

　　</select>字體大小<selectid="fontsize"size="1">

　　<optionvalue="10px">10px</option>

　　<optionvalue="11px">11px</option>

　　<optionvalue="12px"selected="selected">12px</option>

　　<optionvalue="13px">13px</option>

　　<optionvalue="14px">14px</option>

　　<optionvalue="16px">16px</option>

　　<optionvalue="18px">18px</option>

　　<optionvalue="20px">20px</option>

　　<optionvalue="24px">24px</option>

　　</select>代碼折行<selectid="folding"size="1">

　　<optionvalue="manual">manual</option>

　　<optionvalue="markbegin"selected="selected">markbegin</option>

　　<optionvalue="markbeginend">markbeginandend</option>

　　</select>自動(dòng)換行<selectid="soft_wrap"size="1">

　　<optionvalue="off">Off</option>

　　<optionvalue="40">40Chars</option>

　　<optionvalue="80">80Chars</option>

　　<optionvalue="free">Free</option>

　　</select>全選樣式<inputtype="checkbox"name="select_style"id="select_style"checked="">光標(biāo)行高光<inputtype="checkbox"name="highlight_active"id="highlight_active"checked="">顯示行號(hào)<inputtype="checkbox"id="show_gutter"checked="">打印邊距<inputtype="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);

　　})

感謝各位的閱讀，以上就是“怎么用HTML+CSS做實(shí)時(shí)預(yù)覽的markdown編輯器”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)怎么用HTML+CSS做實(shí)時(shí)預(yù)覽的markdown編輯器這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手