怎么用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://ybzwz.com/article/giiehi.html

其他资讯