简介：
开源在线 Markdown 编辑器，推荐使用。
官网：https://pandao.github.io/editor.md/
下载安装
https://github.com/pandao/editor.md/archive/master.zip
下载解压下来的文件夹是:editor.md-master
截取的一部分
1.examples文件中是使用PHP做的所有示例(可以在文档编辑器里打开，并查看源代码)；
2.lib文件夹中是editor.md所依赖的第三方js资源；
3.plugins文件夹中是如emoji表情支持、代码格式化等插件；
在html页面嵌入编辑器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--需要引入的css文件-->
<link rel="stylesheet" href="editor.md-master/css/editormd.min.css" />
</head>
<body>
<!--模拟表单传输数据到后台-->
<form action="./add.php" method="post" enctype="multipart/form-data" accept-charset="UTF-8">
<div id="my-editormd">
<!--Editor.md可以自动附加<textarea>标签-->
<textarea id="my-editormd-markdown-doc" name="my-editormd-markdown-doc" style="display:none;"></textarea>
<!-- 注意：name属性的值-->
<!--textarea中name属性值，应该跟着div的ID"my-editormd"值来定，即(div的id值+)-markdown-doc-->
/***********editormd还会创建一个name=(div的id值+html-code)的textarea见下**********/
</div>
<input type="submit" value=" Send the artcile !" />
</from>
<!--需要引入的js文件和js配置-->
<script src="editor.md-master/examples/js/jquery.min.js"></script>
<script src="editor.md-master/editormd.min.js"></script>
<script type="text/javascript">
$(function() {
var editor = editormd("my-editormd", {//上面div的id值
width: "90%",
height: 540,
theme : "dark", //主题
path: "editor.md-master/lib/" // 这里我的html文件和editor.md-master文件位置如下图
saveHTMLToTextarea : true//这个配置，方便post提交html源码表单，保存 HTML 到 Textarea它关乎后端是否可以获取到值
});
});
//更多的editormd配置请参考下面或官网
</script>
</body>
</html>
另外一个textarea
需要html格式的文本可以从这获取，name都告诉你了，该知道怎么办吧
另外一个textarea
html文件和editor.md-master文件位置
位置
更多editormd配置
width: "90%",
height: 740,
path : '../lib/',
theme : "dark", //主题
previewTheme : "dark",
editorTheme : "pastel-on-dark",
markdown : md,
codeFold : true,
//syncScrolling : false,
saveHTMLToTextarea : true, // 保存 HTML 到 Textarea
searchReplace : true,
//watch : false, // 关闭实时预览
htmlDecode : "style,script,iframe|on*", // 开启 HTML 标签解析，为了安全性，默认不开启
//toolbar : false, //关闭工具栏
//previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
emoji : true,
taskList : true,
tocm : true, // Using [TOCM]
tex : true, // 开启科学公式TeX语言支持，默认关闭
flowChart : true, // 开启流程图支持，默认关闭
sequenceDiagram : true, // 开启时序/序列图支持，默认关闭,
//dialogLockScreen : false, // 设置弹出层对话框不锁屏，全局通用，默认为true
//dialogShowMask : false, // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
//dialogDraggable : false, // 设置弹出层对话框不可拖动，全局通用，默认为true
//dialogMaskOpacity : 0.4, // 设置透明遮罩层的透明度，全局通用，默认值为0.1
//dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
/**上传图片相关配置如下*/
imageUpload : true,//开启上传图片吗？
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],//图片支持的格式
imageUploadURL : "editor.md-master/examples/php/upload.php", //处理图片上传的url
//上面这个地址是官网给定了一个处理上传图片的php的demo 当然后端的代码得自己写
onload : function() {
console.log('onload', this);
//this.fullscreen();
//this.unwatch();
//this.watch().fullscreen();
//this.setMarkdown("#PHP");
//this.width("100%");
//this.height(480);
//this.resize("100%", 640);
}
关于图片上传
首先后端自己写，还有官网给的php-demo我没成功啊。。难道我。漏了点什么。。有没有大佬实现成功的
//editor.md期望得到一个json格式的上传后的返回值，格式是这样的：
/*
{
success : 0 | 1, // 0 表示上传失败，1 表示上传成功
message : "提示的信息，上传成功或上传失败及错误信息等。",
url : "图片地址" // 上传成功时才返回
}
//返回的参数success的值不是字符串“0”和“1”，而是数字0和1，后台返回的时候一定要注意
*/
前台显示
展示内容有两种方式
- 一种方式是直接展示html格式的内容
- 第二种方式是页面加载markdown格式内容，然后通过editor.md再次渲染成html格式。
1.直接展示html
<link rel="stylesheet" href="editor.md-master/css/editormd.min.css" />
<div id="my-content">
${content} <!--${content/}为获取后台的html格式内容。-->
</div>
<script src="editor.md-master/examples/js/jquery.min.js"></script>
<script src="editor.md-master/editormd.min.js"></script>
<script src="editor.md-master/lib/marked.min.js"></script>
<script src="editor.md-master/lib/prettify.min.js"></script>
<script type="text/javascript">
$(function () {
editormd.markdownToHTML("my-content");
})
</script>
2.如果第二种：
首先引入必要JS（下面不是所有必要,官网说依赖这么多）：
<script src="editor.md-master/examples/js/jquery-min.js"></script>
<script src="editor.md-master/lib/flowchart.min.js"></script>
<script src="editor.md-master/lib/jquery.flowchart.min.js"></script>
<script src="editor.md-master/lib/marked.min.js"></script>
<script src="editor.md-master/lib/prettify.min.js"></script>
<script src="editor.md-master/lib/raphael.min.js"></script>
<script src="editor.md-master/lib/sequence-diagram.min.js"></script>
<script src="editor.md-master/lib/underscore.min.js"></script>
<script src="editor.md-master/editormd.min.js"></script>
然后，本页面中，加入如下DIV以及css
<link rel="stylesheet" href="editor.md-master/css/editormd.min.css"/>
<div id="doc-content">
<textarea style="display:none;">
${content} <!--${content/}为获取后台的md格式内容。-->
</textarea>
</div>
再加上如下js
<script type="text/javascript">
var testEditor;
$(function () {
testEditor = editormd.markdownToHTML("doc-content", {//注意：这里是上面DIV的id
htmlDecode: "style,script,iframe",
emoji: true,
taskList: true,
tex: true, // 默认不解析
flowChart: true, // 默认不解析
sequenceDiagram: true, // 默认不解析
codeFold: true,
});});
</script>
效果预览
模拟拿数据
模拟显示md格式的文本
最后重点：你嫌上面俩种方法都麻烦？
肯定有第三方帮助我门做啊。。
上代码你就懂了：
1.老外的工具：strapdown.js 官网http://strapdownjs.com/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.navbar-fixed-top{
display: none;
}
</style>
</head>
<body>
<xmp theme="readable" style="display:none;">
##hello world
**写点东西做测试**
| 表格 |支持 |
| ------------ | ------------ |
| 吗|呀 |
</xmp>
</body>
<script src="http://strapdownjs.com/v/0.2/strapdown.js"></script>
</html>
国外的请下载下来然后改样式路径
它的gitHub:https://github.com/arturadib/strapdown
2.showdown.min.js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body onload="convert()">
<div>
<textarea id="content" style="display:none;" >
##hello world
**写点东西做测试**
- 123
*斜体*
</textarea>
<div id="result">
</div>
<script src="https://cdn.bootcss.com/showdown/1.3.0/showdown.min.js"></script>
<script>
function convert(){
//获取要转换的文字
var text = document.getElementById("content").value;
//创建实例
var converter = new showdown.Converter();
//进行转换
var html = converter.makeHtml(text);
//展示到对应的地方 result便是id名称
document.getElementById("result").innerHTML = html;
}
</script>
</body>
</html>
怎么不支持表格啊!!!!
