1.editor.md的安装与取值

最新推荐文章于 2023-11-11 16:54:58 发布

耕耘虫

最新推荐文章于 2023-11-11 16:54:58 发布

阅读量1.5k

点赞数 1

分类专栏：前端的花花世界文章标签： markdown html5 编辑器 js css

本文链接：https://blog.csdn.net/weixin_45581482/article/details/117969482

版权

前端的花花世界专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在这里插入图片描述
用官方的话概括 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>

接下来就是初始化编辑器：
特别注意： 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>

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

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

取值

通常，在做 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>

效果展示

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

获取 Textarea 保存的 HTML 源码：

获取预览窗口里的 HTML：

本节完

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

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

耕耘虫

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
1.editor.md的安装与取值

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

扫一扫

专栏目录