这次给大家带来纯前端技术做实时预览的markdown编辑器，用纯前端技术做实时预览的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编辑器
(先添加编辑区和显示区代码)
#mdeditor,#preview,#panel-editor,#panel-preview{
height: 100%;
width: 100%;
}
(先添加初始化代码)
效果预览
立即学习“前端免费学习笔记（深入）”；
第三步 添加工具到工具栏示例:
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中文网其它相关文章！
相关阅读：
相关文章
使用 marked.js 自定义图片渲染与路径前缀
marked.js自定义图片渲染与路径前缀处理教程
marked.js 自定义图片渲染：处理非标准语法与路径前缀
静态站点生成_javascript博客系统
JavaScript静态站点_Gatsby.js构建博客系统
相关标签:
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热门AI工具
更多
