Html开发：集成markdown格式编辑器

一、下载依赖

　　官方地址：https://pandao.github.io/editor.md/

二、页面代码

　　1、需要使用到的依赖资源

　　除了上述资源外，还需要引入jquery.js，该js引入部分需要放置在editormd.min.js引入之前。

　　2、代码整合

<html>
    <head>
        <title>集成Markdown编辑器测试</title>
        <link rel="stylesheet" href="./css/editormd.min.css">
        <script src="./jquery.js"></script>
        <script src="./editormd.min.js"></script>
        <style type="text/css">
            .markDownDiv{
                z-index: 1 !important
            }
        </style>
    </head>
    <body>
        <div id="markDownDiv" class="markDownDiv">
            <textarea name="markDownContent" placeholder="请输入文本内容" style="display: none"></textarea>
        </div>
    <body>
    <script type="text/javascript">
    // 初始化编辑器
    var markDownEditor;
    $(function() {
        // 编辑器名称要与页面中应放置的区域id保持一致
        markDownEditor = editormd("markDownDiv", {
            // 宽度
            width: 800,
            // 高度
            height: 600,
            // 滚动条纵向滚动,设置为false取消滚动
            syncScrolling : "single",
            // lib资源路径
            path: "./lib/",
            // 编辑器工具栏区域样式风格
            theme: "dark",
            // 编辑器编辑部分样式风格
            editorTheme: "pastel-on-dark",
            // 预览区域样式风格
            previewTheme: "dark",
            // 开启表情使用
            emoji: true,
         });
     });
    </script>
</html>

　　3、效果预览

__EOF__

本文作者：我命倾尘
本文链接：https://www.cnblogs.com/guobin-/p/16642262.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！