首页 > 其他分享> 文章详细

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

2022-08-31 11:01:57 阅读：209 来源： 互联网

标签：markdown 样式 markDownEditor js dark 编辑器 Html markDownDiv

一、下载依赖

　　官方地址：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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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