13518219792

NEWS

网站建设资讯

如何使用HTML+CSS做一个实时预览的markdown编辑器-创新互联

这篇文章主要介绍了如何使用HTML+CSS做一个实时预览的markdown编辑器，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

成都创新互联公司是专业的托克托网站建设公司，托克托接单;提供成都网站制作、网站建设、外贸网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行托克托网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

第一步 搭建布局:

1.构思布局（以下是总体布局）

2.项目下新建个index.html页面,写入以下代码:

* {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;
}

第二步 引入资源实现初步效果:

1.项目下创建js文件夹

2.解从下载好的压缩包解marked/lib下的marked.js到js文件夹

3.解从下载好的压缩包解ace-builds/src到js文件夹重命名为ace

4.引入js文件

(注:markdown.css是markdown样式文件,可以自行编写或从网上下载 比如:github-markdown-css)

5初始化插件

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

#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);//光标位置插入
}

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

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

   加粗
   斜体
   ')">引用..... 设置:   
       
           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
   全选样式   光标行高光   显示行号   打印边距   

......
            $("#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做一个实时预览的markdown编辑器”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。