editormd使用教程
对于现在的程序员来说，都需要一个快速写文章的语言，那么无非就是markdown了，市面上markdown编辑器并不多，而且也不怎么好用，现在推荐国内的比较牛逼的。
入门
- 建议先到官方看下如何使用，避免少走弯路。
- 官方地址 https://pandao.github.io/editor.md/examples/index.html
下载安装
开始集成
将editormd拷贝到你的项目
css代码
<link href="/Content/editormd/css/editormd.min.css" rel="stylesheet" />
html代码
js代码
<script src="/Content/editormd/editormd.min.js"></script>
<script type="text/javascript">
//初始化编辑器
var testEditor;
$(function () {
testEditor = editormd("txtblogcontent", {
width: "100%",
height: 740,
path: '/Content/editormd/lib/',
theme: "dark",
previewTheme: "dark",
editorTheme: "pastel-on-dark",
markdown: "",
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: "/Center/RichTextUpload",
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);
}
});
});
//获取编辑器内容
var blogcontent = encodeURIComponent(testEditor.getMarkdown());
</script>
将markdown转换成html
css代码
<link href="/Content/editormd/css/editormd.min.css" rel="stylesheet" />
html代码
js代码
<script src="/Content/editormd/lib/marked.min.js"></script>
<script src="/Content/editormd/lib/prettify.min.js"></script>
<script src="/Content/editormd/lib/raphael.min.js"></script>
<script src="/Content/editormd/lib/underscore.min.js"></script>
<script src="/Content/editormd/lib/sequence-diagram.min.js"></script>
<script src="/Content/editormd/lib/flowchart.min.js"></script>
<script src="/Content/editormd/lib/jquery.flowchart.min.js"></script>
<script src="/Content/editormd/editormd.min.js"></script>
<script type="text/javascript">
var testEditor;
$(function () {
testEditor = editormd.markdownToHTML("txtblogcontent", {
htmlDecode: "style,script,iframe", // you can filter tags decode
emoji: true,
taskList: true,
tex: true, // 默认不解析
flowChart: true, // 默认不解析
sequenceDiagram: true, // 默认不解析
codeFold: true,
});
</script>
完善
到这里基本已经完成了，上传图片的自己后台处理下即可，还有一些弹出框，例如弹出上传图片时样式会影响，根据自己的需求改改即可，另外还有表情里的github-emoji会没有显示出来，需要改几个地方。
- 将emoji表情下载下来上传到服务器。
- 修改emoji-dialog.js文件
第一个箭头表示存放表情包的文件夹
js修改代码
将路径改为自己上传的表情表路径即可
展示表情
将这四个js文件中的路径替换成你表情包的路径，原来路径 http://www.emoji-cheat-sheet.com/graphics/emojis/
