纯前端打造一个简易实时预览的markdown编辑器

先下载https://github.com/markedjs/marked和https://github.com/ajaxorg/ace-builds/插件,还有JQuery也是不可少的
--在线markdown编辑器参考,https://www.zybuluo.com/mdeditor https://maxiang.io/

第一步搭建布局:
1.构思布局（以下是总体布局）

总体样式.png

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='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> 

 <!--略-->

(先添加初始化代码)

<!--略-->
<script>
            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()));
            });
        </script>
    </body>

</html>

效果预览

第三步添加工具到工具栏示例:

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);
           })

效果

(更多API查看ace.js官网)

ok!我就说道这里了。感兴趣的小伙伴自行DIY吧!

最后编辑于：2018.09.25 15:19:30

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 158,560评论 4赞 361
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,104评论 1赞 291
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 108,297评论 0赞 243
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 43,869评论 0赞 204
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,275评论 3赞 287
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,563评论 1赞 216
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,833评论 2赞 312
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,543评论 0赞 197
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,245评论 1赞 241
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,512评论 2赞 244
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,011评论 1赞 258
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,359评论 2赞 253
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,006评论 3赞 235
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,062评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,825评论 0赞 194
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,590评论 2赞 273
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,501评论 2赞 268

纯前端打造一个简易实时预览的markdown编辑器

ok!我就说道这里了。感兴趣的小伙伴自行DIY吧!

推荐阅读更多精彩内容