这次给大家带来用html+css做一个实时预览的markdown编辑器，用html+css做一个实时预览的markdown编辑器的注意事项有哪些，下面就是实战案例，一起来看一下。
第一步 搭建布局:
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);
})
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
相关文章
如何把html_将内容转为HTML格式的操作步骤【详解】
.html如何转换_HTML文件转换为其他格式的方法【教程】
html5怎样插入markdown文档_html5md转html插入与渲染技巧【技巧】
html如何输入_在HTML表单中添加输入元素【元素】
如何将文件存为html_将其他格式文件保存为HTML格式【保存】
相关标签:
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热门AI工具
更多
