如何使用HTML+CSS做一个实时预览的markdown编辑器
这篇文章主要介绍了如何使用HTML+CSS做一个实时预览的markdown编辑器,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
成都创新互联公司是专业的深泽网站建设公司,深泽接单;提供网站设计制作、网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行深泽网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
第一步 搭建布局:
1.构思布局(以下是总体布局)
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%; }(先添加初始化代码)
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 实现编辑器设置功能:
..... 设置: 字体大小 代码折行 自动换行 全选样式 光标行高光 显示行号 打印边距...... $("#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编辑器
地址分享:http://myzitong.com/article/pddicp.html