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

1.項目下創(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)

5初始化插件

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

#mdeditor#preview,#panel-editor,#panel-preview{
height: 100%;
width: 100%;
}





                                        

 



                                       


 
 

(先添加初始化代碼)

 
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);//光標(biāo)位置插入
}

加粗
斜體
')">引用
.....

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

   加粗
   斜體
   ')">引用..... 設(shè)置:   
       
           Chrome
           Clouds
           Crimson Editor
           Dawn
           Dreamweaver
           Eclipse
           GitHub
           IPlastic
           Solarized Light
           TextMate
           Tomorrow
           XCode
           Kuroir
           KatzenMilch
           SQL Server
       
       
           Ambiance
           Chaos
           Clouds Midnight
           Cobalt
           Gruvbox
           idle Fingers
           krTheme
           Merbivore
           Merbivore Soft
           Mono Industrial
           Monokai
           Pastel on dark
           Solarized Dark
           Terminal
           Tomorrow Night
           Tomorrow Night Blue
           Tomorrow Night Bright
           Tomorrow Night 80s
           Twilight
           Vibrant Ink
       
   字體大小   
       10px
       11px
       12px
       13px
       14px
       16px
       18px
       20px
       24px
   代碼折行   
       manual
       mark begin
       mark begin and end
   自動換行   
       Off
       40 Chars
       80 Chars
       Free
   全選樣式   光標(biāo)行高光   顯示行號   打印邊距   

......
            $("#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);
})

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何使用HTML+CSS做一個實時預(yù)覽的markdown編輯器”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!