其他分享
首页 > 其他分享> > Html开发：集成markdown格式编辑器

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、效果预览

　　

 

 　　

标签：markdown,样式,markDownEditor,js,dark,编辑器,Html,markDownDiv
来源： https://www.cnblogs.com/guobin-/p/16642262.html