如何在网页中加载Markdown编辑器

最新推荐文章于 2024-07-25 02:11:29 发布

cutewrp

最新推荐文章于 2024-07-25 02:11:29 发布

阅读量1.4k

点赞数 1

分类专栏： HTML 文章标签： markdown html5 javascript jquery

本文链接：https://blog.csdn.net/m0_51082586/article/details/108781979

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

现在很多网页都支持发布博客，Markdown就成了很多网站的首选。但是怎么插入Markdown编辑器呢？

效果图：

首先，要下载有关文件。
点此下载
然后，在examples文件夹下，创建一个HTML5网页文档

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Markdown</title>
</head>

<body>
</body>
</html>

链接相关文件（头部）：

<head>
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="../css/editormd.css" />
            <script src="js/jquery.min.js"></script>
        <script src="../editormd.min.js"></script>
        <script type="text/javascript">
			var testEditor;

            $(function() {
                testEditor = editormd("test-editormd", {
                    width   : "90%",
                    height  : 640,
                    syncScrolling : "single",
                    path    : "../lib/"
                });
                
                /*
                // or
                testEditor = editormd({
                    id      : "test-editormd",
                    width   : "90%",
                    height  : 640,
                    path    : "../lib/"
                });
                */
            });
        </script>
</head>

在<body></body>之间插入一个<div>标签，id为test-editormd。

<body>
<div id="test-editormd">
</div>
</body>

然后，在这个div里面插入一个<textarea>style为display:none;

<body>
<div id="test-editormd">
<textarea style="display:none;">
</textarea>
</div>
</body>

在<textarea>中插入Markdown代码：
（以下为默认代码）

@[toc]
#### Disabled options

- TeX (Based on KaTeX);
- Emoji;
- Task lists;
- HTML tags decode;
- Flowchart and Sequence Diagram;

#### Editor.md directory

    editor.md/
            lib/
            css/
            scss/
            tests/
            fonts/
            images/
            plugins/
            examples/
            languages/     
            editormd.js
            ...

```html
&lt;!-- English --&gt;
&lt;script src="../dist/js/languages/en.js"&gt;&lt;/script&gt;

&lt;!-- 繁體中文 --&gt;
&lt;script src="../dist/js/languages/zh-tw.js"&gt;&lt;/script&gt;

``
下面为完整代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8" />
        <title>Markdown</title>
        <link rel="stylesheet" href="css/style.css" />
        <link rel="stylesheet" href="../css/editormd.css" />
                <script src="js/jquery.min.js"></script>
        <script src="../editormd.min.js"></script>
        <script type="text/javascript">
			var testEditor;

            $(function() {
                testEditor = editormd("test-editormd", {
                    width   : "90%",
                    height  : 640,
                    syncScrolling : "single",
                    path    : "../lib/"
                });
                
                /*
                // or
                testEditor = editormd({
                    id      : "test-editormd",
                    width   : "90%",
                    height  : 640,
                    path    : "../lib/"
                });
                */
            });
        </script>
    </head>
    <body>
            <div id="test-editormd">
                <textarea style="display:none;">[TOC]

#### Disabled options

- TeX (Based on KaTeX);
- Emoji;
- Task lists;
- HTML tags decode;
- Flowchart and Sequence Diagram;

#### Editor.md directory

    editor.md/
            lib/
            css/
            scss/
            tests/
            fonts/
            images/
            plugins/
            examples/
            languages/     
            editormd.js
            ...


&lt;!-- English --&gt;
&lt;script src="../dist/js/languages/en.js"&gt;&lt;/script&gt;

&lt;!-- 繁體中文 --&gt;
&lt;script src="../dist/js/languages/zh-tw.js"&gt;&lt;/script&gt;

</textarea>
            </div>
    </body>
</html>