这次给大家带来用html+css做一个实时预览的markdown编辑器，用html+css做一个实时预览的markdown编辑器的注意事项有哪些，下面就是实战案例，一起来看一下。
第一步 搭建布局:
1.构思布局（以下是总体布局）
2.项目下新建个index.html页面,写入以下代码:
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>markdown编辑器</title>
<style type="text/css">
* {margin: 0;padding: 0;outline: none;border-radius: 0;
}
html,body {width: 100%;height: 100%;font-family: "helvetica neue", 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;
}</style>
</head>
<body>
<div id="toolbar"></div>
<div id="container">
<div id="editor-column" class="pull-left">
<div id="panel-editor">
</div>
</div>
<div id="preview-column" class="pull-right">
<div id="panel-preview">
</div>
</div>
</div>
</body></html>
第二步 引入资源实现初步效果:
1.项目下创建js文件夹
2.解从下载好的压缩包解marked/lib下的marked.js到js文件夹
3.解从下载好的压缩包解ace-builds/src到js文件夹重命名为ace
4.引入js文件
(注:markdown.css是markdown样式文件,可以自行编写或从网上下载 比如:github-markdown-css)
<!doctype html><html>
<head>
<meta charset='utf-8'>
<title>markdown编辑器</title>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/marked.js"></script>
<script src="js/ace/ace.js"></script>
<link href="markdown.css" rel="stylesheet" />
<!--略-->
5初始化插件
(先添加编辑区和显示区代码)
<!--略-->#mdeditor#preview,#panel-editor,#panel-preview{
height: 100%;
width: 100%;
}</style>
</head>
<body>
<div id='toolbar'></div>
<div id='container'><div id='editor-column' class='pull-left'>
<div id='panel-editor'>
<!--编辑区-->
<div class="editor-content" id="mdeditor" ></div>
</div>
</div>
<div id='preview-column' class='pull-right'>
<div id='panel-preview'>
<!--显示区-->
<div id="preview" class="markdown-body"></div>
</div>
</div>
<!--略-->
(先添加初始化代码)
<!--略-->
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);//光标位置插入
}
<div id='toolbar'>
<button onclick="inserttext('**?**')">加粗</button>
<button onclick="inserttext('_?_')">斜体</button>
<button onclick="inserttext('>')">引用</button>
.....</div>
第四步 ace.js api 实现编辑器设置功能:
<div id='toolbar'>
<button onclick="inserttext('**?**')">加粗</button>
<button onclick="inserttext('_?_')">斜体</button>
<button onclick="inserttext('>')">引用</button>..... 设置: <select id="theme" size="1">
<optgroup label="bright">
<option value="ace/theme/chrome">chrome</option>
<option value="ace/theme/clouds">clouds</option>
<option value="ace/theme/crimson_editor">crimson editor</option>
<option value="ace/theme/dawn">dawn</option>
<option value="ace/theme/dreamweaver">dreamweaver</option>
<option value="ace/theme/eclipse">eclipse</option>
<option value="ace/theme/github">github</option>
<option value="ace/theme/iplastic">iplastic</option>
<option value="ace/theme/solarized_light">solarized light</option>
<option value="ace/theme/textmate">textmate</option>
<option value="ace/theme/tomorrow">tomorrow</option>
<option value="ace/theme/xcode">xcode</option>
<option value="ace/theme/kuroir">kuroir</option>
<option value="ace/theme/katzenmilch">katzenmilch</option>
<option value="ace/theme/sqlserver">sql server</option>
</optgroup>
<optgroup label="dark">
<option value="ace/theme/ambiance">ambiance</option>
<option value="ace/theme/chaos">chaos</option>
<option value="ace/theme/clouds_midnight">clouds midnight</option>
<option value="ace/theme/cobalt">cobalt</option>
<option value="ace/theme/gruvbox">gruvbox</option>
<option value="ace/theme/idle_fingers">idle fingers</option>
<option value="ace/theme/kr_theme">krtheme</option>
<option value="ace/theme/merbivore">merbivore</option>
<option value="ace/theme/merbivore_soft">merbivore soft</option>
<option value="ace/theme/mono_industrial">mono industrial</option>
<option value="ace/theme/monokai">monokai</option>
<option value="ace/theme/pastel_on_dark">pastel on dark</option>
<option value="ace/theme/solarized_dark">solarized dark</option>
<option value="ace/theme/terminal">terminal</option>
<option value="ace/theme/tomorrow_night">tomorrow night</option>
<option value="ace/theme/tomorrow_night_blue">tomorrow night blue</option>
<option value="ace/theme/tomorrow_night_bright">tomorrow night bright</option>
<option value="ace/theme/tomorrow_night_eighties">tomorrow night 80s</option>
<option value="ace/theme/twilight">twilight</option>
<option value="ace/theme/vibrant_ink">vibrant ink</option>
</optgroup>
</select>字体大小 <select id="fontsize" size="1">
<option value="10px">10px</option>
<option value="11px">11px</option>
<option value="12px" selected="selected">12px</option>
<option value="13px">13px</option>
<option value="14px">14px</option>
<option value="16px">16px</option>
<option value="18px">18px</option>
<option value="20px">20px</option>
<option value="24px">24px</option>
</select>代码折行 <select id="folding" size="1">
<option value="manual">manual</option>
<option value="markbegin" selected="selected">mark begin</option>
<option value="markbeginend">mark begin and end</option>
</select>自动换行 <select id="soft_wrap" size="1">
<option value="off">off</option>
<option value="40">40 chars</option>
<option value="80">80 chars</option>
<option value="free">free</option>
</select>全选样式 <input type="checkbox" name="select_style" id="select_style" checked="">光标行高光 <input type="checkbox" name="highlight_active" id="highlight_active" checked="">显示行号 <input type="checkbox" id="show_gutter" checked="">打印边距 <input type="checkbox" id="show_print_margin" checked=""></div>
<!---略--->
......
$("#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);
})
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
相关阅读：
js正则表达式的10个应用实例
vue.js的2.0后台系统实战案例
以上就是用html+css做一个实时预览的markdown编辑器的详细内容。