首頁 > web前端 > js教程 > 純前端技術做即時預覽的markdown編輯器

純前端技術做即時預覽的markdown編輯器

php中世界最好的语言
發布: 2018-03-10 15:39:47
原創
3276 人瀏覽過

這次帶給大家純前端技術做即時預覽的markdown編輯器,用純前端技術做即時預覽的markdown編輯器的注意事項有哪些,下面就是實戰案例,一起來看一下。

第一步建立佈局:
1.構思佈局(以下是整體佈局)


純前端技術做即時預覽的markdown編輯器

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.解開從下載好的壓縮包解marked/lib下的marked.js到js資料夾
3.解開下載好的壓縮包解ace-builds/src到js資料夾重新命名為ace
4.引入js檔案
(註:markdown.css是markdown樣式檔案,可以自行寫或從網路下載例如:github-markdown-css)

<!DOCTYPE html><html> 
    <head>
        <meta charset=&#39;UTF-8&#39;>
        <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=&#39;toolbar&#39;></div>
        <div id=&#39;container&#39;><div id=&#39;editor-column&#39; class=&#39;pull-left&#39;>
                <div id=&#39;panel-editor&#39;>
                                        <!--编辑区-->
                    <div class="editor-content" id="mdeditor" ></div>
                </div> 
            </div>
            <div id=&#39;preview-column&#39; class=&#39;pull-right&#39;>
                <div id=&#39;panel-preview&#39;>
                                        <!--显示区-->
                    <div id="preview" class="markdown-body"></div>
                </div>
            </div> 
 <!--略-->
登入後複製

(先加入初始化程式碼)

<!--略--><script>
            var acen_edit = ace.edit(&#39;mdeditor&#39;); 
            acen_edit.setTheme(&#39;ace/theme/chrome&#39;);
            acen_edit.getSession().setMode(&#39;ace/mode/markdown&#39;);
            acen_edit.renderer.setShowPrintMargin(false);
            $("#mdeditor").keyup(function() {
                $("#preview").html(marked(acen_edit.getValue()));
            });        </script>
    </body></html>
登入後複製


效果預覽

第三步驟新增工具到工具列範例:

1.寫公用方法
(其實點選工具主要是在編輯器裡自動插入原本手打的符號)

function insertText(val){
                acen_edit.insert(val);//光标位置插入
            }
<div id=&#39;toolbar&#39;>
            <button onclick="insertText(&#39;**?**&#39;)">加粗</button>
            <button onclick="insertText(&#39;_?_&#39;)">斜体</button>
            <button onclick="insertText(&#39;>&#39;)">引用</button>
            .....        </div>
登入後複製

第四步ace.js API 實作編輯器設定功能:

<div id=&#39;toolbar&#39;>
           <button onclick="insertText(&#39;**?**&#39;)">加粗</button>
           <button onclick="insertText(&#39;_?_&#39;)">斜体</button>
           <button onclick="insertText(&#39;>&#39;)">引用</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中文網其它相關文章!

相關閱讀:

用nodejs做簡介的網站

#怎麼用JS寫模擬器

如何在行動端做出1px邊框的效果

#

以上是純前端技術做即時預覽的markdown編輯器的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板