<!DOCTYPE html>
<html lang="utf8">
<head>
<meta charset="UTF-8">
<title>md转换为html</title>
</head>
<body>
<script src="https://cdn.bootcss.com/marked/0.8.0/marked.js"></script>
<link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script type="text/javascript">
var rendererMD = new marked.Renderer();
marked.setOptions({
renderer: rendererMD,
gfm: true,
tables: true,
breaks: false,
pedantic: false,
sanitize: false,
smartLists: true,
smartypants: false
});
marked.setOptions({
highlight: function (code) {
return hljs.highlightAuto(code).value;
}
});
function insertText(obj, str) {
if (document.selection) {
var sel = document.selection.createRange();
sel.text = str;
} else if (typeof obj.selectionStart === 'number' && typeof obj.selectionEnd === 'number') {
var startPos = obj.selectionStart,
endPos = obj.selectionEnd,
cursorPos = startPos,
tmpStr = obj.value;
obj.value = tmpStr.substring(0, startPos) + str + tmpStr.substring(endPos, tmpStr.length);
cursorPos += str.length;
obj.selectionStart = obj.selectionEnd = cursorPos;
} else {
obj.value += str;
}
}
function moveEnd(obj) {
obj.focus();
var len = obj.value.length;
if (document.selection) {
var sel = obj.createTextRange();
sel.moveStart('character', len);
sel.collapse();
sel.select();
} else if (typeof obj.selectionStart == 'number' && typeof obj.selectionEnd == 'number') {
obj.selectionStart = obj.selectionEnd = len;
}
}
//ctrl 是dom节点
function getCursortPosition(ctrl) {
//获取光标位置函数
var CaretPos = 0;
// IE Support
if (document.selection) {
ctrl.focus(); // 获取焦点
var Sel = document.selection.createRange(); // 创建选定区域
Sel.moveStart('character', -ctrl.value.length); // 移动开始点到最左边位置
CaretPos = Sel.text.length; // 获取当前选定区的文本内容长度
}
// Firefox support (非ie)
else if (ctrl.selectionStart || ctrl.selectionStart == '0') {
CaretPos = ctrl.selectionStart; // 获取选定区的开始点
}
return CaretPos;
}
//ctrl 是dom节点，pos 是要定位到的位置
function setCaretPosition(ctrl, pos) {
//设置光标位置函数
if (ctrl.setSelectionRange) //非ie
{
ctrl.focus(); // 获取焦点
ctrl.setSelectionRange(pos, pos); // 设置选定区的开始和结束点
} else if (ctrl.createTextRange) {
var range = ctrl.createTextRange(); // 创建选定区
range.collapse(true); // 设置为折叠,即光标起点和结束点重叠在一起
range.moveEnd('character', pos); // 移动结束点
range.moveStart('character', pos); // 移动开始点
range.select(); // 选定当前区域
}
}
</script>
<div style="font-size: 20px;height: 30px; text-align: center;color: #009689; font-weight: bold;">md转换为html</div>
<style type="text/css">
#area > table {
width: 100%;
table-layout: fixed;
}
#area table tr td {
margin: 0;
padding: 6px;
border: 0;
}
#md-area {
width: 100%;
height: 600px;
font-size: 18px;
overflow: hidden;
font-weight: bold;
outline: none;
}
#show-area {
height: 600px;
background-color: #FCF6E5;
}
.clearfix:before {
content: "";
display: table;
}
</style>
<script>
function mdSwitch() {
var mdValue = document.getElementById("md-area").value;
var html = marked(mdValue);
document.getElementById("show-area").innerHTML = html;
}
function TextAreaTab(obj) {
if (9 == event.keyCode) {
//do stm...
//alert(event.keyCode);
var oldPos = getCursortPosition(obj);
insertText(obj, " ");
setCaretPosition(obj, oldPos + 4);
window.setTimeout(function () {
//document.getElementById("bt0").click();
obj.focus();
}, 2);
}
}
</script>
<div id="area">
<table>
<tr>
<td><textarea name="" id="md-area" onkeyup="mdSwitch()" onkeydown="TextAreaTab(this)"
autofocus="autofocus"></textarea></td>
<td>
<div id="show-area" class="clearfix"></div>
</td>
</tr>
</table>
</div>
<button id="bt0">提交</button>
</body>
</html>
