纯前端打造一个简易实时预览的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页面,写入以下代码:




    
        
        markdown编辑器

效果预览

第二步引入资源实现初步效果:
1.项目下创建js文件夹
2.解从下载好的压缩包解marked/lib下的marked.js到js文件夹
3.解从下载好的压缩包解ace-builds/src到js文件夹重命名为ace
4.引入js文件
(注:markdown.css是markdown样式文件,可以自行编写或从网上下载比如:github-markdown-css)


 
    
        
        markdown编辑器

5初始化插件

(先添加编辑区和显示区代码)

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

(先添加初始化代码)

效果预览

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

1.编写公用方法
(其实点击工具主要是在编辑器里自动插入本来手打的符号)

function insertText(val){
                acen_edit.insert(val);//光标位置插入
            }

第四步 ace.js API 实现编辑器设置功能:


           
           
           
           .....
           
           设置:
           
           字体大小
            
           代码折行
           
           自动换行
           
           全选样式 
           光标行高光
           显示行号 
           打印边距
       

......
           $("#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官网)

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

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

你可能感兴趣的:(纯前端打造一个简易实时预览的markdown编辑器)