大家好,欢迎来到IT知识分享网。
对于现在的程序员来说,都需要一个快速写文章的语言,那么无非就是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/
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/15235.html