Markdown编辑器editor.md的使用
目录(?)[-]
- 一Markdown和editormd简介
- 二editormd的使用
- 1下载
- 2简单使用
- 21在自己的页面上引入相关的css和js代码如下
- 22在自己的页面中加上DIV
- 23在同页面中再加上如下JS代码
- 3上传图片
- 4Markdown文档页面展示
- 三editormd的更多配置项
- 四网站源码
一、Markdown和editor.md简介:
Markdown在技术圈里(估计更多是程序猿吧)越来越流行。简单的语法,统一的格式,使用过程中,手基本上不用从键盘上移到鼠标上去,超级方便。写好了一篇md
文档(也就是含Markdown语法格式的普通TXT文件),可以随意放到别的支持Markdown格式的网站上发布。
editor.md是国内开源的一款在线Markdown编辑器,单纯基于前端JavaScript实现,和后端什么语言无关。这个还可以画流程图,以及数学公式。官网Demo示例使用的是PHP语言,我后端使用的是Java,Springmvc。
如下记录我在个人开源项目17Smart中使用的方法和过程。17Smart源码目前托管在Github上,感兴趣的可以参考了解。
二、editor.md的使用:
2.1、下载:
我们可以从其官网中找到下载最新版V1.5.0,解压资源包如下图:
- >1.examples文件中是使用PHP做的所有示例(可以在文档编辑器里打开,并查看源代码);
- >2.lib中是editor.md所依赖的第三方js资源;
- >3.plugins中是如emoji表情支持、代码格式化等插件;
2.2、简单使用:
将上面的解压的editormd资源文件拷贝(选取需要的)到我们的项目适合目录下面。
2.2.1、在自己的页面上引入相关的css和js,代码如下:
<link rel="stylesheet"href="/smart-api/htdocs/mdeditor/css/editormd.css" /> <script src="/smart-api/htdocs/mdeditor/js/jquery.min.js"></script> <script src="/smart-api/htdocs/mdeditor/js/editormd.min.js"></script>
2.2.2、在自己的页面中加上DIV:
DIV的id为my-editormd
(这个div在form表单中)。DIV中包含二个textarea,其实官方demo中只有一个,第二个是否方便我们POST提交时,后端可以获取到md文档内容,如java中request.getParameter("my-editormd-html-code")
。
<div id="my-editormd" > <textarea id="my-editormd-markdown-doc" name="my-editormd-markdown-doc" style="display:none;"></textarea> <!-- 注意:name属性的值--> <textarea id="my-editormd-html-code" name="my-editormd-html-code" style="display:none;"></textarea> </div>
这里值得注意两点:
- >1.后端要想获得第二个textarea中的值,首先需要打开editor.md的
saveHTMLToTextarea : true
设置(见下面); - >2.textarea中name属性值,应该跟着div的ID
my-editormd
值来定,即$-html-code
(刚开始,后端死活获取不到值,翻看了源码才知道)
2.2.3、在同页面中再加上如下JS代码:
<script type="text/javascript">$(function() { editormd("my-editormd", {//注意1:这里的就是上面的DIV的id属性值 width : "90%", height : 640, syncScrolling : "single", path : "/smart-api/htdocs/mdeditor/lib/",//注意2:你的路径 saveHTMLToTextarea : true//注意3:这个配置,方便post提交表单 }); }); </script>
这里值得注意三点:
- >1.注意1:这里的就是上面的DIV的id属性值;
- >2.注意2:你的path路径(原资源文件中lib包在我们项目中所放的位置);
- >3.注意3:saveHTMLToTextarea 设置true或false关乎后端是否可以获取到值;
这样我们就完成了一个最简单的editor.md
的编辑器了,我们可以在这里面书写自己熟悉的Markdown文档,包括代码,右侧有实时预览。
2.3、上传图片:
上面最简单的editor.md
的编辑器,目前还是不可以上传图片的。我们需要略作配置修改,还是很简单的。
我们都知道在编写Markdown文档时,图片语法是![说明](url地址)
。可是,往往我们需要上传本地图片。在上面的基础之上,略做如下修改即可(当然后端的代码得自己写):
<script type="text/javascript">$(function() {editormd("my-editormd", {//注意1:这里的就是上面的DIV的id属性值 width : "90%", height : 640, syncScrolling : "single", path : "/smart-api/htdocs/mdeditor/lib/",//注意2:你的路径 saveHTMLToTextarea : true,//注意3:这个配置,方便post提交表单 /**上传图片相关配置如下*/ imageUpload : true, imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"], imageUploadURL : "/smart-api/upload/editormdPic/",//注意你后端的上传图片服务地址 }); }); </script>
注意:editor.md
期望你上传图片的服务返回如下json格式的内容
{success :0 | 1, //0表示上传失败;1表示上传成功 message :"提示的信息", url : "图片地址" //上传成功时才返回 }
我的后台使用的是springmvc,代码如下:
(注意:@RequestParam(value = "editormd-image-file", required = true
注解)
@RequestMapping("editormdPic")
@ResponseBody
public JSONObject editormdPic (@RequestParam(value = "editormd-image-file", required = true) MultipartFile file, HttpServletRequest request,HttpServletResponse response) throws Exception{String trueFileName = file.getOriginalFilename(); String suffix = trueFileName.substring(trueFileName.lastIndexOf(".")); String fileName = System.currentTimeMillis()+"_"+CommonUtils.getRandomNumber(100, 999)+suffix; String path = request.getSession().getServletContext().getRealPath("/assets/msg/upload/"); System.out.println(path); File targetFile = new File(path, fileName); if(!targetFile.exists()){ targetFile.mkdirs(); } //保存 try { file.transferTo(targetFile); } catch (Exception e) { e.printStackTrace(); } JSONObject res = new JSONObject(); res.put("url", Constant.WEB_ROOT+"assets/msg/upload/"+fileName); res.put("success", 1); res.put("message", "upload success!"); return res; }
2.4、Markdown文档页面展示:
上面我们通过post提交,后端获取到MD文档内容后,往往存在数据库中,然后在页面展示时,我们需要把MD语法文档,转换为HTML语法(也可以先转换为标准的HTML存储,但我觉得先转换的话,会占用较多存储空间)。
首先引入必要JS(下面不是所有必要):
<script src="/smart-api/htdocs/mdeditor/js/jquery.min.js"></script> <script src="/smart-api/htdocs/mdeditor/lib/marked.min.js"></script> <script src="/smart-api/htdocs/mdeditor/lib/prettify.min.js"></script> <script src="/smart-api/htdocs/mdeditor/lib/raphael.min.js"></script> <script src="/smart-api/htdocs/mdeditor/lib/underscore.min.js"></script> <script src="/smart-api/htdocs/mdeditor/lib/sequence-diagram.min.js"></script> <script src="/smart-api/htdocs/mdeditor/lib/flowchart.min.js"></script> <script src="/smart-api/htdocs/mdeditor/lib/jquery.flowchart.min.js"></script> <script src="/smart-api/htdocs/mdeditor/js/editormd.min.js"></script>
然后,本页面中,加入如下DIV:
<div id="doc-content"> <textarea style="display:none;">${message.detail }</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>
三、editor.md的更多配置项:
这配置,可以根据官方提供的Demo和源码找到(editor.md-master/examples
目录下面)。如,主题颜色设置;上传图片后的特殊处理等。
<script type="text/javascript">var myEditor; $(function() { myEditor = editormd("my-editormd", { width : "90%", height : 800, syncScrolling : "single", path : "/smart-api/htdocs/mdeditor/lib/", saveHTMLToTextarea : true, emoji: true,//emoji表情,默认关闭 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 codeFold: true, imageUpload : true, imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"], imageUploadURL : "/smart-api/upload/editormdPic/", /*上传图片成功后可以做一些自己的处理*/ onload: function () { //console.log('onload', this); //this.fullscreen(); //this.unwatch(); //this.watch().fullscreen(); //this.width("100%"); //this.height(480); //this.resize("100%", 640); }, /**设置主题颜色*/ editorTheme: "pastel-on-dark", theme: "gray", previewTheme: "dark" }); }); </script>
四、网站&源码:
- 网站:17Smart
- 源码:Github
- eBook:《深入剖析Tomcat》
转载于:https://www.cnblogs.com/weixupeng/p/8617844.html
Markdown编辑器editor.md的使用相关推荐
- 基于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配置项 ...
- 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格式的兴起,给广大发布者 ...
- 使用editor编辑器遇到的小问题:editor.md工具栏置顶
问题原因: 在使用Markdown编辑器editor.md时,由于editor.md的toolbar始终保持在页面顶部,导致我在使用vue整合时,页面排版出现错乱 解决方案: 在 editormd.j ...
- PHP项目中使用 Markdown编辑器
个人站点 :http://oldchen.iwulai.com/ Markdown在技术圈越来越受欢迎,今天为大家带来一款国内开源的比较好用的Markdown编辑器--editor.md. 在这次项目 ...
- SpringBoot整合Editor.md实现Markdown编辑器
Editor.md 是一款开源的.可嵌入的 Markdown 在线编辑器(组件),基于 CodeMirror.jQuery 和 Marked 构建. 文章目录 一.技术选型及分支部署 二.集成手册 2 ...
- editor.md中markdown编辑器的实现
markdown编辑器我觉得用起来非常的方便,故我就想实现一个简单的markdown编辑器 1.下载editor.md插件 git地址:https://github.com/pandao/edit ...
- Editor.md 的Markdown 编辑器集成与使用(全)
在这之前使用的编辑器是ueditor,是百度的:现在记录一下已经集成有段时间的 Editor.md 的 md 编辑器,确实好用! 在这之前,有个问题,数据库是保存 md 的还是保存 html 的,在网 ...
最新文章
- c语言程序设计血型与遗传报告,血型遗传关系C语言编程
- 洛谷P1140 相似基因【线性dp】
- 第八届java c组,2015年Java方向C组第八题
- boost::lambda模块ll_static_cast,ll_dynamic_cast,ll_const_cast,ll_reinterpret_cast的测试程序
- Intellij IDEA 使用学习
- 集群部署中解决定时任务重复执行的问题-redis分布式锁应用
- iPhone8 和 X 买哪个?听我的
- C语言模拟顺序栈的创建、入栈、出栈操作
- Sophos 和 ReversingLabs 公开含2000万个 PE 文件的数据集
- C#windows服务中的Timer控件的使用
- Eclipse清除SVN的账号信息
- Java高级:面试题-1
- 软件实施工程师项目经验
- 百度OCR图片内容识别
- u-boot编译错误1:dtc: not found make
- IPD的主要难点在I即集成,这需要在别人身上穿洞
- linux查看硬盘vid,在linux获取并打印usb移动硬盘vid和pid
- 《智能搜索和推荐系统》总结
- FPGA实验---数码管秒表显示实验
- TA(技术美术)宝藏网站