简单记录MarkDown载入项目_markdown编辑器加入项目-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_52772299/article/details/130914398

该文章详细介绍了如何集成和使用开源Markdown编辑器Editor.md，包括下载、引入CSS和JS文件，初始化编辑器，设置参数如图片上传和获取Markdown及HTML内容的方法。此外，还展示了如何将Markdown内容转换为HTML并进行回显。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.先在官网下载开源包：Editor.md - 开源在线 Markdown 编辑器 (pandao.github.io)

2.解压文件并放入自己项目文件

3.创建markdown编辑器

*引入markdown包内以下文件

<link rel="stylesheet" href="css/style.css" />

<link rel="stylesheet" href="../css/editormd.css" />

<script src="js/jquery.min.js"></script>

<script src="../editormd.js"></script>

*js代码初始化编辑器页面

            var testEditor = editormd("test-editormd", {
                // 页面高度
                width: "90%",
                // 页面宽度
                height: 500,
                syncScrolling: "single",
                path: 'editor.md-master/lib/',
                saveHTMLToTextarea: true,
                imageUpload: true,
                imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                imageUploadURL: "/UserCenter/UploadImage" //注意你后端的上传图片服务地址 
            });
        }

*html代码引入编辑器

        <div id="layout">
            <header>
                <h1>MarkDown</h1>   
            </header>
            <div id="test-editormd">                
                <textarea style="display:none;"></textarea>
            </div>
        </div>

*实现效果：

4.获取markdown的值：

                            var a_html = testEditor.getHTML();
                            var a_md = testEditor.getMarkdown();

关于MarkDown（HTML内容）回显

1.引入一下文件(主要看后面的文件名)

<link rel="stylesheet" href="editor.md-master/css/style.css" />
<link rel="stylesheet" href="editor.md-master/css/editormd.css" />
<script type="text/javascript" src="editor.md-master/css/jquery.min.js"></script>
<script type="text/javascript" src="editor.md-master/editormd.js"></script>
<script type="text/javascript" src="editor.md-master/lib/marked.min.js"></script>
<script type="text/javascript" src="editor.md-master/lib/prettify.min.js"></script>
<script type="text/javascript" src="editor.md-master/lib/raphael.min.js"></script>
<script type="text/javascript" src="editor.md-master/lib/underscore.min.js"></script>
<script type="text/javascript" src="editor.md-master/lib/sequence-diagram.min.js"></script>
<script type="text/javascript" src="editor.md-master/lib/flowchart.min.js"></script>
<script type="text/javascript" src="editor.md-master/lib/jquery.flowchart.min.js"></script>
<script type="text/javascript" src="editor.md-master/editormd.js"></script>

2.js初始化

           var editormd.markdownToHTML("test", {
                htmlDecode: "style,script,iframe",
                emoji: true,
                taskList: true,
                tex: true,  // 默认不解析
                flowChart: true,  // 默认不解析
                sequenceDiagram: true  // 默认不解析
            });

3.html显示markdown

    <div id="layout">
        <div id="test" width="500px" height="500px">
            <textarea id="area" style="display: none;">
            </textarea>
        </div>
    </div>

4.插入内容时，在id=test标签内插入html内容

*后台返回的数据