怎么用HTML+CSS做实时预览的markdown编辑器
这篇文章主要讲解了"怎么用HTML+CSS做实时预览的markdown编辑器"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"怎么用HTML+CSS做实时预览的markdown编辑器"吧！
*{margin:0;padding:0;outline:none;border-radius:0;
}
html,body{width:100%;height:100%;font-family:"HelveticaNeue",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%;
}
(先添加初始化代码)
varacen_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.编写公用方法
(其实点击工具主要是在编辑器里自动插入本来手打的符号)
functioninsertText(val){
acen_edit.insert(val);//光标位置插入
}
.....
第四步ace.jsAPI实现编辑器设置功能:
字体大小
代码折行
自动换行
全选样式
......
$("#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编辑器"的内容了，经过本文的学习后，相信大家对怎么用HTML+CSS做实时预览的markdown编辑器这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！
