精准传达 • 有效沟通
从品牌网站建设到网络营销策划，从策略到执行的一站式服务
怎么用HTML+CSS做实时预览的markdown编辑器
这篇文章主要讲解了“怎么用HTML+CSS做实时预览的markdown编辑器”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用HTML+CSS做实时预览的markdown编辑器”吧！
成都创新互联主要从事网页设计、PC网站建设（电脑版网站建设）、wap网站建设（手机版网站建设）、响应式网站设计、程序开发、网站优化、微网站、微信小程序定制开发等，凭借多年来在互联网的打拼，我们在互联网网站建设行业积累了丰富的成都做网站、网站建设、网站设计、网络营销经验，集策划、开发、设计、营销、管理等多方位专业化运作于一体。
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)
markdown编辑器
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实现编辑器设置功能:
加粗
斜体
')">引用.....设置:
Chrome
Clouds
CrimsonEditor
Dawn
Dreamweaver
Eclipse
GitHub
IPlastic
SolarizedLight
TextMate
Tomorrow
XCode
Kuroir
KatzenMilch
SQLServer
Ambiance
Chaos
CloudsMidnight
Cobalt
Gruvbox
idleFingers
krTheme
Merbivore
MerbivoreSoft
MonoIndustrial
Monokai
Pastelondark
SolarizedDark
Terminal
TomorrowNight
TomorrowNightBlue
TomorrowNightBright
TomorrowNight80s
Twilight
VibrantInk
字体大小
10px
11px
12px
13px
14px
16px
18px
20px
24px
代码折行
manual
markbegin
markbeginandend
自动换行
Off
40Chars
80Chars
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);
})
感谢各位的阅读，以上就是“怎么用HTML+CSS做实时预览的markdown编辑器”的内容了，经过本文的学习后，相信大家对怎么用HTML+CSS做实时预览的markdown编辑器这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！
文章名称：怎么用HTML+CSS做实时预览的markdown编辑器
网站链接：http://cdkjz.cn/article/giiehi.html
