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

最新推荐文章于 2023-07-23 20:05:11 发布
最新推荐文章于 2023-07-23 20:05:11 发布
阅读量1.4k 收藏 5
点赞数 1
分类专栏： HTML 文章标签： markdown html5 javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51082586/article/details/108781979
版权

现在很多网页都支持发布博客，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>
cutewrp
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
jQuery实现Markdown编辑器插件
06-24
jQuery实现Markdown编辑器插件是一款基于bootstrap的Markdown网页文本编辑器插件。
在JAVA-WEB项目使用Editor.md实现MarkDown编辑器的使用
weixin_41844824的博客
04-13 936
官网：http://pandao.github.io/editor.md/ Editor.md的安装使用： 基本使用markdown是相当简单的，比ueditor还要简单，从git上下载回来的Editor.md是1.5版，压缩包里有分门别类详细的文件夹。 在examples文件夹中有一个简单的示例simple.html，可以在浏览器里打开，并查看源代码，我这里做一个简单的总结，并加上表单提交的配置...
怎样方便的查看Markdown.md文件
LotionL的博客
10-09 6279
查看Markdown文件,一个浏览器插件即可解决 例：Win10自带的Edge浏览器 1.查找新扩展 2.在搜索框搜索 “Markdown Viewer” 3.点击右上角的 "m" 小图标, 出现一个配置界面, 点击最下面的高级选项. 4.然后你看到下面的页面, 选择"Allow All", 重启浏览器, 就OK了. 5.如果仍然不行，请在已安装的拓展中，找到此插件，进入详细信息，选中允许访问文件 URL 6.关闭浏览器，即可 ...
轻量级阅读Markdown文件-----chorme插件markdown-viewer-3.9
景兄弟的博客
03-16 1377
因为我想在电脑上像github一样打开md文件，但是找来找去没有一个符合我需求的，后面偶然发现谷歌浏览器有一个插件，200多K就可以实现查看，所以把方法分享在这里。 1.我也没法科学上网，所以只能在https://github.com/simov/markdown-viewer/archive/3.9.zip网址先下载插件，然后解压 2.进入chrome://extensions/ 3.打开开发者模式，将解压的文件夹加载进来，然后就可以把md文件拖进来看效果啦，和github阅读一样的。 ...
vue markdown内容网页展示
six_teen的博客
12-06 1365
之前使用了mavonEditor这款Markdown编辑器进行博客文章的编写， 最近在弄把博客文章进行网页展示效果，开始使用marked.js，但是代码高亮问题导致页面样式及其的丑陋。后面又在网上四处寻找方法，最后产生想法，要是能用mavonEditor将Markdown的内容展示该多好呢。 然后就在网上查询资料，最后还是找到了方法（不得不说，面向百度编程真的很妙） 首先下载好mavonEditor之后，然后在vue中引用之后，接着就是对mavonEditor这个组件的属性进行设置 <mavon-ed
在网页中引入第三方文件MarkDown的步骤（详细）
最新发布
m0_71927557的博客
07-23 1159
在网页中引入第三方文件MarkDown的步骤（详细）
基于Web的Markdown编辑器HedgeDoc
wbsu2004的博客
11-28 6566
HedgeDoc 是编写和共享 markdown 的最佳平台。
【Markdown语法】链接和图片
惊鸿若梦一书生
08-29 5314
链接 在 Markdown 中，插入链接不需要其他按钮，你只需要使用[显示文本](链接地址)这样的语法即可，例如： [百度](https://www.baidu.com) 注意： (https://www.baidu.com)括号是英文的，切记不要手误打成中文的。 效果如下： 百度 也可以采用Ctrl+L的快捷键来插入链接 图片 在 Markdown 中，插入图片不需要其他...
用Markdown添加链接
AndrewHYang的博客
01-14 2万+
用Markdown添加链接 作为一门文本标记语言，Markdown能够往文章/页面里添加链接。给一个.md文件添加链接的方法主要有3种。 1. 显示关键词，指向一个链接 [关键词](链接地址 &quot;（可选）添加一个标题&quot;) 如果你想在一行中添加一个链接，并且将它显示为一个关键词或其他东西，而不是链接地址，你应该用这个方法 举个例子. Markdown 插入链接 你可以将图片作为关键词吗? 别忘了使用...
将Markdown嵌入到我们的HTML页面中
03-12 6210
当浏览器第一次访问服务器的时候，服务器给浏览器创建了一个Cookie，但是这个Cookie的有效期是多久呢，通过cookie.getMaxAge()，得到的时间竟然是-1，网上找了找原因，说是浏览器关闭即过期，但是我重启浏览器后，为什么也能get到Cookie呢，我并没有创建Cookie呀，后来，我就多次重启浏览器，并记录里面的SESSIONID，我发现，每次的SESSIONID还真不一样，说明真...
MeloduetMark - C#实现的Markdown编辑器
07-03
附带源代码和可执行文件 支持预览, 导出HTML, 插件构架等功能 via MeloduetWorks
Editor.md Markdown编辑器-其他
06-12
Editor.md是一个可嵌入的开源Markdown在线编辑器组件，你可以很方便用在浏览器、NW.js（Node-webkit）等地方，基于CodeMirror、jQuery和Marked构建。 主要特性： 1、支持“标准”Markdown和Github风格的语法，也可...
markdown-editor：一个在线的markdown编辑器
02-04
欢迎来到降价编辑器一个简易版的markdown编辑器 :house: :sparkles: （可能没有及时更新） :sparkles: -github（可能资源加载缓慢）安装npm install用法npm rum servenpm run build作者 :bust_in_silhouette:追月 ：...
GitNotes:Markdown编辑器与GitHub集成
04-09
如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。npm test 在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。npm run build 构建生产到应用程序build文件夹。 它在生产...
Markserv将markdown作为htmlGitHub样式索引目录在您编辑时实时重新加载
08-10
Markserv将markdown作为htmlGitHub样式索引目录在您编辑时实时重新加载
web页面 js 加载和显示Markdown .md文件总结
热门推荐
chuangxin的专栏
06-24 2万+
Markdown文件是当下比较流行的内容展示格式，简书、github等都推荐使用md文件来展示内容。本文讨论web页面如何加载和展示markdown md文件，并提供了一个来自有道的markdown web编辑、预览器。
Webpack/Vue-cli两种方式加载markdown文件并实现代码高亮
没做过产品的后端不是个好前端
12-14 1061
准备的资源： highlight.js ： 实现代码高亮，通过npm install highlight.js -D安装 vue-markdown-loader：解析md文件的必备loader，通过npm install vue-markdown-loader -D安装 下面我们分两个场景来说明一下md文件的解析 Webpack 在项目根目录下创建build/webpack.config.js // 在webpack.config.js中添加规则 { test: /\.md$/, lo
java web实现markdown_editormd实现Markdown编辑器写文章功能
weixin_26854475的博客
02-27 434
想在项目里引入Markdown编辑器实现写文章功能，网上找到一款开源的插件editormd.js可以先git clone下载下来git clone https://github.com/pandao/editor.md.git现在介绍一下怎么引入JavaWeb项目里，可以在Webapp(WebContent)文件夹下面，新建一个plugins的文件夹，然后再新建editormd文件夹，文件夹命名的...
在前端页面展示Markdown文件
weixin_34124577的博客
12-21 6676
常我们都会在GitHub上浏览很多的readme文件，这些都是Markdown语法写成的Markdown文件，HTML中并没有用于展示Markdown文件的元素，那么为什么可以在前端展示呢？ 有别于GitHub官方给提供的API（有访问频率限制），我使用了一个npm 模块。这个模块可以非常方便的将Markdown语法的字符串直接转化为HTML 代码字符串。然后我们让某个div 元素的inner...
用js实现Markdown 编辑器
05-30
好的，我可以给你提供一些用 JavaScript 实现 Markdown 编辑器的指导。 首先，你需要在 HTML 中创建一个文本输入框和一个预览框。你可以使用 `<textarea>` 标签来创建文本输入框，使用 `<div>` 标签来创建预览框。示例代码如下： ```html <textarea id="markdown-input"></textarea> <div id="markdown-preview"></div> ``` 接着，你需要使用 JavaScript 来实现 Markdown 编辑器的功能。具体来说，你需要编写以下几个函数： 1. `updatePreview()`: 这个函数用于将输入的 Markdown 文本转换成 HTML，并显示在预览框中。你可以使用开源的 Markdown 库 [marked.js](https://marked.js.org/) 来实现这个功能。示例代码如下： ```javascript function updatePreview() { const markdownInput = document.getElementById('markdown-input').value; const markdownPreview = document.getElementById('markdown-preview'); markdownPreview.innerHTML = marked(markdownInput); } ``` 2. `saveMarkdown()`: 这个函数用于将输入的 Markdown 文本保存到本地。你可以使用浏览器提供的 `localStorage` API 来实现这个功能。示例代码如下： ```javascript function saveMarkdown() { const markdownInput = document.getElementById('markdown-input').value; localStorage.setItem('markdown', markdownInput); } ``` 3. `loadMarkdown()`: 这个函数用于从本地加载已保存的 Markdown 文本，并显示在输入框中。示例代码如下： ```javascript function loadMarkdown() { const markdownInput = document.getElementById('markdown-input'); markdownInput.value = localStorage.getItem('markdown') || ''; updatePreview(); } ``` 最后，你需要在页面加载完成时调用 `loadMarkdown()` 函数，以加载已保存的 Markdown 文本。示例代码如下： ```javascript window.addEventListener('load', loadMarkdown); ``` 希望以上指导对你有所帮助，祝你编写 Markdown 编辑器顺利！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值