Markdown 编辑器 Editor.md 预览

一、效果

二、代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Editor在线预览</title><style>body{margin-left: 20px;margin-right: 30px;width: 80%;text-align: center;}</style><!-- 引入editormd的css --><link rel="stylesheet" href="https://pandao.github.io/editor.md/css/editormd.min.css" />
</head>
<body>
<!-- 定义markDown插件挂载容器 START -->
<div id="markdown-editor"><!-- 编辑器的内容 START --><textarea id="content1" style="display:none;">
### 关于 Editor.md
```
**Editor.md** 是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。
```**加粗**
*斜体*```<?phpecho '你好';
```
## 我之前写的几篇 - 传送门
[Markdown 编辑器 Editor.md 使用](https://blog.csdn.net/qq_36025814/article/details/105773373 "Markdown 编辑器 Editor.md 使用")
[Markdown 编辑器 Editor.md 图片上传使用](https://blog.csdn.net/qq_36025814/article/details/105773740 "Markdown 编辑器 Editor.md 图片上传使用")</textarea><!-- 编辑器的内容 END -->
</div>
<!-- 定义markDown插件挂载容器 END -->
</body><!-- 这里的引入顺序不能改变，先引入jquery，再引入 editormd，否则可能报错 [ ReferenceError: Zepto is not defined ] [ ReferenceError: editormd is not defined ]  -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><!-- 预览时需要引入marked.js，否则报错 [ ReferenceError: marked is not defined ] -->
<script src="https://pandao.github.io/editor.md/lib/marked.min.js"></script>
<!-- 预览时需要引入prettify.js，否则报错 [ ReferenceError: prettyPrint is not defined ] -->
<script src="https://pandao.github.io/editor.md/lib/prettify.min.js"></script><!-- 解析 flowChart，sequenceDiagram 等需要的js -->
<!--
<script src="https://pandao.github.io/editor.md/lib/raphael.min.js"></script>
<script src="https://pandao.github.io/editor.md/lib/underscore.min.js"></script>
<script src="https://pandao.github.io/editor.md/lib/sequence-diagram.min.js"></script>
<script src="https://pandao.github.io/editor.md/lib/flowchart.min.js"></script>
<script src="https://pandao.github.io/editor.md/lib/jquery.flowchart.min.js"></script>
--><!--
这里因为直接引用线上的地址，非常慢，为了快速的展示效果，注释了一些引入。
如果你实际用到了：流程图啊，sequenceDiagram 这些，就需要打开。
我注释的这些js，由于下面配置了 [ flowChart: true ], 所以是会报错的：
[ TypeError: div.find(...).flowChart is not a function ]
--><script src="https://pandao.github.io/editor.md/editormd.js"></script><script>let mkEditormkEditor = editormd.markdownToHTML("markdown-editor", {htmlDecode      : "style,script,iframe",  // you can filter tags decodeemoji           : true,taskList        : true,tex             : true,  // 默认不解析flowChart       : true,  // 默认不解析sequenceDiagram : true,  // 默认不解析});
</script>
</html>

三、注意：

js直接引入的第三方线上地址，如果能加载成功（目前是能加载成功[2020-04-27]），该代码直接复制可用。

需要注意的地方都在代码里注释了。

四、传送门

Markdown 编辑器 Editor.md 使用

Markdown 编辑器 Editor.md 图片上传使用

五、参考地址

editormd实现文章详情页面预览

Markdown 编辑器 Editor.md 预览相关推荐

Markdown编辑器editor.md的使用
目录(?)[-] 一Markdown和editormd简介二editormd的使用 1下载 2简单使用 21在自己的页面上引入相关的css和js代码如下 22在自己的页面中加上DIV 23在同页面中 ...
基于JavaWeb的MarkDown编辑器editor.md的使用
1.简介 editor.md是国内开发的开源项目,单纯基于前端JavaScript,可以实现markdown编辑器的所有功能. 主要特性支持通用 Markdown / CommonMark 和 GF ...
Markdown编辑器Editor.md插件的使用
官网: Editor.md - 开源在线 Markdown 编辑器 (pandao.github.io)https://pandao.github.io/editor.md/index.html配置项 ...
markdown生成html不出效果,mdeditor: 简单markdown编辑器，同步预览html效果。不依赖任何插件，使用简单，原创，造轮子中。。。更新中。。。...
#mdeditor 演示地址 API 初始化实例(传入参数id) var mdeditor = mdeditor({ id: 'wrap' }); 带参数完整配置项 var mdeditor = md ...
127.0.0.1/dokuwiki/install.php,DokuWiki安装+集成markdown编辑器editor.md
安装安装php和nginx yum install -y php70w php70w-gd php70w-xml php70w-fpm nginx 开机自启动 systemctl enable ng ...
markdown在线编辑器 editor.md 二次开发详细教程
markdown在线编辑器 editor.md 二次开发需求经常需要在网络论坛发布文章进行宣传,但每个论坛的编写格式存在差异,给发布带来了很大的障碍. 最近markdown格式的兴起,给广大发布者 ...
subtext3php,Sublimetext 3 实现编辑markdown时同步刷新网页预览
下面由sublime教程栏目给大家介绍Sublimetext 3 实现编辑markdown时同步刷新网页预览的方法,希望对需要的朋友有所帮助! 实现Markdown实时预览首先要安装两个插件, 强烈 ...
用户收货地址h5页面_如何实现H5可视化编辑器的实时预览和真机扫码预览功能...
前言所见即所得的设计理念在WEB IDE领域里一直是备受瞩目的功能亮点, 也能极大的提高 web coder的编程体验和编程效率. 笔者接下来就将对H5可视化编辑器的实时预览和真机扫码预览功能做一次方 ...
用户收货地址h5页面_如何实现H5可视化编辑器的实时预览和真机扫码预览功能?...
前言所见即所得的设计理念在WEB IDE领域里一直是备受瞩目的功能亮点, 也能极大的提高 web coder的编程体验和编程效率. 笔者接下来就将对H5可视化编辑器的实时预览和真机扫码预览功能做一次 ...
如何实现H5可视化编辑器的实时预览和真机扫码预览功能
往期精彩基于NodeJS从零构建线上自动化打包工作流(H5-Dooring特别版) 在线IDE开发入门之从零实现一个在线代码编辑器基于React+Koa实现一个h5页面可视化编辑器-Dooring ...

Markdown 编辑器 Editor.md 预览

Markdown 编辑器 Editor.md 预览相关推荐

最新文章

热门文章