master

分支 (1)

管理

管理

master

json-help
/
markdown.html

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
    <title>MarkDown 在线编辑器</title>
    <link rel="stylesheet" href="/static/editor/editormd.css" />

    <style>
        body,
        html {
            padding: 0;
            margin: 0;
        }

        .theme {
            position: fixed;
            bottom: 50px;
            right: 50px;
            border: 1px solid #333;
            display: flex;
            border-radius: 5px;
        }

        .theme a {
            flex: 1;
            padding: 8px 10px;
            font-size: 14px;
            line-height: 1;
            background: #fff;
            color: #333;
            cursor: pointer;

        }

        .theme a:last-child {
            background: #333;
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="layout">
        <div id="editormd"></div>
    </div>

    <div class="theme">
        <a class="" data-theme="default">白色</a>
        <a class="" data-theme="dark">黑色</a>
    </div>
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/editor/editormd.js"></script>
    <script type="text/javascript">
        var editor;

        $(function () {

            editor = editormd("editormd", {
                width: "100%",
                height: $(document).height() + 'px',
                path: '/static/editor/lib/',
                theme: "dark",
                previewTheme: "dark",
                editorTheme: "pastel-on-dark",
                markdown: '',
                codeFold: true,
                //syncScrolling : false,
                saveHTMLToTextarea: true, // 保存 HTML 到 Textarea
                searchReplace: true,
                //watch : false,                // 关闭实时预览
                htmlDecode: "style,script,iframe|on*", // 开启 HTML 标签解析，为了安全性，默认不开启
                //toolbar  : false,             //关闭工具栏
                //previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
                emoji: true,
                taskList: true,
                tocm: true, // Using [TOCM]
                tex: true, // 开启科学公式TeX语言支持，默认关闭
                flowChart: true, // 开启流程图支持，默认关闭
                sequenceDiagram: true, // 开启时序/序列图支持，默认关闭,
                //dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为true
                //dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
                //dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为true
                //dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为0.1
                //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
                imageUpload: true,
                imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                imageUploadURL: "./php/upload.php",
                onload: function () {
                    console.log('onload', this);
                    this.setMarkdown("# 欢迎使用MarkDown编辑器");
                    //this.width("100%");
                    this.height($(document).height());
                    //this.resize("100%", 640);
                    this.fullscreen();

                    //读取是否有远程文件
                    if (get_param('file')) {
                        $.get('request.php', {
                            file: get_param('file')
                        }, function (res) {
                            editor.setMarkdown(res);
                            editor.previewing();
                            editor.setTheme('default');
                            editor.setEditorTheme('default');
                            editor.setPreviewTheme('default');
                        })
                    }
                }
            });

        });


        function get_param(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) {
                    return pair[1];
                }
            }
            return (false);
        }


        $('.theme a').click(function () {
            if ($(this).data('theme') == 'dark') {
                editor.setTheme('dark');
                editor.setEditorTheme('pastel-on-dark');
                editor.setPreviewTheme('dark');
            } else {
                editor.setTheme('default');
                editor.setEditorTheme('default');
                editor.setPreviewTheme('default');
            }
        })


        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?977e04d32a22530f9f52529cdf67f058";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
</body>

</html>