这次给大家带来用html+css做一个实时预览的markdown编辑器，用html+css做一个实时预览的markdown编辑器的注意事项有哪些，下面就是实战案例，一起来看一下。
第一步 搭建布局:
1.构思布局（以下是总体布局）
2.项目下新建个index.html页面,写入以下代码:
立即学习“前端免费学习笔记（深入）”；
markdown编辑器 * {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)
markdown编辑器
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);})
相信看了本文案例你已经掌握了方法，更多精彩请关注创想鸟其它相关文章！
相关阅读：
js正则表达式的10个应用实例
Vue.js的2.0后台系统实战案例
以上就是用HTML+CSS做一个实时预览的markdown编辑器的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1545890.html
微信扫一扫
支付宝扫一扫
