分类 favorite 下的文章

<!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>