1.editor.md的安装与取值_react 中editor.md安装使用

作者：知新_RL | 2024-05-07 07:55:39

踩

react 中editor.md安装使用

在这里插入图片描述
用官方的话概括 editor.md 的作用：开源在线 Markdown¹ 编辑器
刚开始玩 editor.md 的时候，认为看看官方文档，跟着做就能够实现出来。但没有想到刚开始就给了我当头一棒，就是如下这个现象：
在这里插入图片描述
我相信大部分第一次接触 editor.md 的人都遇到过这种情况。我因此抓耳挠腮发了好大一通恼骚——为什么别人档都可以，我的就不行？
那么是为什么？请看下面我的演示。

下载安装 editor.md

可以访问官网进行下载，官方提供有下载及安装方法，这里的话我就演示一下我的操作过程。

官网链接：https://pandao.github.io/editor.md/index.html
官方下载链接：https://github.com/pandao/editor.md/archive/master.zip
GitHub 地址：https://github.com/pandao/editor.md

将下载好的文件复制到项目中去，如下图所示：
在这里插入图片描述
在 HTML 文件中引用 editor.md 的 CSS 与 JS 文件（editor.md依赖jQuery，所以这里还需要在引用editor.md的JS文件之前引用jQuery）：

<link rel="stylesheet" type="text/css" href="editor.md/css/editormd.min.css" />
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="editor.md/editormd.min.js" type="text/javascript" charset="utf-8"></script>
1
2
3

接下来就是初始化编辑器：
特别注意： path 属性的值是一个路径，指向 editor.md 所需要的依赖文件位置，如果指向不对，那么将会出现文章开头第二章图的效果。

<script type="text/javascript">
	$(function() {
		var editor = editormd("test-editor", {
			width: "50%",	//编辑器的宽度
			height: "500",	//编辑器的高度
			path: "editor.md/lib/"	//这里是一个路径，指向editor.md所需要的依赖文件位置，如果指向不对，那么将会出现文章开头第二章图的效果。,
			saveHTMLToTextarea : true
		});
	});
</script>
1
2
3
4
5
6
7
8
9
10

依赖项文件夹位置如图所示：
在这里插入图片描述
同时在 HTML 的 body 中也要添加一个 id 为 test-editor 的 DIV：

<div id="test-editor"></div>
1

取值

通常，在做 Web 端富文本编辑的时候，我们只会关注 Markdown 文档的源码及内容展示的HTML源码。

testEditor.getMarkdown(); // 获取 Markdown 源码
testEditor.getHTML(); // 获取 Textarea 保存的 HTML 源码
testEditor.getPreviewedHTML(); // 获取预览窗口里的 HTML，在开启 watch 且没有开启 saveHTMLToTextarea 时使用

下面展示演示的所有源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>MarkdownDemo</title>
		<link rel="stylesheet" type="text/css" href="editor.md/css/editormd.min.css" />
	</head>
	<body>
		<center>
			<button type="button" id="getMarkdown">Markdown 源码</button>&emsp;&emsp;
			<button type="button" id="getHTML">HTML 源码</button>&emsp;&emsp;
			<button type="button" id="getPreviewedHTML">预览窗口里的 HTML</button>&emsp;&emsp;
		</center>
		<br>
		<div id="test-editor"></div>
	</body>
</html>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="editor.md/editormd.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function() {
		var editor = editormd("test-editor", {
			width: "50%",
			height: "500",
			path: "editor.md/lib/",
			saveHTMLToTextarea : true
		});
		$("#getMarkdown").click(function() {
			alert(editor.getMarkdown());
		});
		$("#getHTML").click(function() {
			alert(editor.getHTML());
		});
		$("#getPreviewedHTML").click(function() {
			alert(editor.getPreviewedHTML());
		});
	});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

效果展示

在这里插入图片描述
获取 Markdown 源码：

获取 Textarea 保存的 HTML 源码：

获取预览窗口里的 HTML：

本节完

这篇博客是一个经验的分享，也是我个人的一个学习笔记，希望对正在学习的你有所帮助。
我的演示项目GitHub链接：wangeditorDemo

Markdown 基本语法. Markdown是一种轻量级标记语言，排版语法简洁，让人们更多地关注内容本身而非排版。 ↩︎

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/548106