Markdown编辑器editor.md的使用---markdown上传图片
http://kindeditor.org/
确定下有没有查找替换功能
http://pandao.github.io/editor.md/
http://pandao.github.io/editor.md/examples/html-preview-markdown-to-html.html
https://github.com/helloworldtang/spring-boot-rte-study
一、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,解压资源包如下图:
http://pandao.github.io/editor.md/examples/index.html
The open source embeddable online markdown editor (component). https://pandao.github.io/editor.md/
- >1.examples文件中是使用PHP做的所有示例(可以在文档编辑器里打开,并查看源代码);
- >2.lib中是editor.md所依赖的第三方js资源;
- >3.plugins中是如emoji表情支持、代码格式化等插件;
注意事项1:
需要注意的是,LEGACYHTML5需要搭配一个额外的库NekoHTML才可用。到项目根目录的build.gradle文件里这样添加它到dependencies
具体内容如下:
非严格的thymeleaf格式
你可能会发现在默认配置下,thymeleaf对.html的内容要求很严格,比如<meta charset="UTF-8" />,如果少最后的标签封闭符号/,就会报错而转到错误页。也比如你在使用Vue.js这样的库,然后有<div v-cloak></div>这样的html代码,也会被thymeleaf认为不符合要求而抛出错误。
因此,建议增加下面这段:
spring.thymeleaf.mode = LEGACYHTML5
spring.thymeleaf.mode的默认值是HTML5,其实是一个很严格的检查,改为LEGACYHTML5可以得到一个可能更友好亲切的格式要求。
需要注意的是,LEGACYHTML5需要搭配一个额外的库NekoHTML才可用。到项目根目录的build.gradle文件里这样添加它到dependencies:
compile('net.sourceforge.nekohtml:nekohtml:1.9.22')
然后运行一次Gradle刷新(有任何Gradle改动,都应该这样运行一次):
Gradle刷新
最后重启项目就可以感受到不那么严格的thymeleaf了。
参考
http://acgtofe.com/posts/2016...
https://segmentfault.com/q/1010000008308601/a-1020000008308882
基于spring boot的示例代码2:
https://github.com/wchstrife/blog 配套的文章:http://blog.csdn.net/wchstrife/article/details/76725317
Editor.md和markdown实现Sg一样的截图粘贴上传https://segmentfault.com/a/1190000010776967
另一个Markdown的博客:
使用SpringBoot快速搭建个人博客https://zhuanlan.zhihu.com/p/28428463
另一个基于markdown的code:https://github.com/mrdear/MarkdownViewTools
采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写形式,极低门槛,拿来即用。 http://www.layui.com http://www.layui.com/doc/base/infrastructure.html
SpringBoot项目实战(一)--Markdown展示工具http://dev.dafan.info/detail/209683?p=54-68
need to do :https://github.com/jetaggart/spring-boot-markdown
need to do:好像很有趣的代码,Kotlin 使用 Spring WebFlux 实现响应式编程: https://github.com/EasyKotlin/kotlin-with-webflux
need to do:一个小博客https://github.com/OverrideRe/MyBlog
需要鉴别下,下面这篇文章是否有效
https://course.tianmaying.com/web-development+markdown#0
博客是要显示在HTML之中的,大多博客网站都会提供HTML编辑器,这样的编辑器通常会包含一组格式按钮、一系列快捷键和一个输入框。然而,HTML编辑器难以精确地编写文档,同时可视化的编辑产生大量冗余的标签和属性(这也是dreamweaver逐渐淡出开发者圈子的原因之一)。我们可以使用更高端的方式编辑HTML文档:使用Markdown。
Markdown 是一种轻量级标记语言。通过markdown,可以使用易读易写的纯文本格式编写文档,然后转换成有效的HTML文档。类似在电子邮件中通过某些纯文本标记生成HTML片段。如果你还不确定Markdown是什么东西,请打开 markdown-live-preview 来马上体验一下!Markdown语法细节可以查看: http://wowubuntu.com/markdown/
另一个markdown开源库https://github.com/sirthias/pegdown
富文本编辑器https://dev.ckeditor.com/
这个代码没有深入分析过https://github.com/jetaggart/spring-boot-markdown
开源博客系统 - 分享(这个没有测试,need to do) https://juejin.im/entry/5934cdefac502e0068ab9727
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》
http://blog.csdn.net/lovejavaydj/article/details/73692917
Markdown编辑器editor.md的使用---markdown上传图片的更多相关文章
- Markdown编辑器editor.md的使用
目录(?)[-] 一Markdown和editormd简介 二editormd的使用 1下载 2简单使用 21在自己的页面上引入相关的css和js代码如下 22在自己的页面中加上DIV 23在同页 ...
- thinkphp5使用Markdown编辑器Editor.md并上传图片
Editor.md官网:https://pandao.github.io/editor.md/index.html 下载后解压放到项目内,和引入ueditor差不多 1.引入项目资源 <!--m ...
- Markdown编辑器Editor.md使用方式
摘要: 搭建个人博客时,涉及文章上传,文章展示,这里需要一个Markdown插件,mark一下. Editormd下载地址:http://pandao.github.io/editor.md/ 由于前 ...
- Markdown编辑器的使用
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/LoveJavaYDJ/article/details/73692917 一.Markdown和edi ...
- JAVA WEB项目中使用并改造editor.md实现Markdown编辑器
Markdown和Editor.md简介 Markdwon编辑器在技术工作者圈子中已经越来越流行,简单的语法,统一的格式,强大的扩展功能,最重要的是:你可以用Markdown,设计一篇精彩绝伦的文档而 ...
- editor.md实现Markdown编辑器
editor.md实现Markdown编辑器 Markdown和Editor.md简介 Markdwon编辑器在技术工作者圈子中已经越来越流行,简单的语法,统一的格式,强大的扩展功能,最重要的是:你可 ...
- 好用的Markdown编辑器一览 readme.md 编辑查看
https://github.com/pandao/editor.md https://pandao.github.io/editor.md/examples/index.html Editor.md ...
- MVC开发Markdown编辑器(2)
MVC开发Markdown编辑器(2) MVC Markdown 实时预览 我希望实现一个在线实时预览的Markdown编辑器,左边是编辑处,右边是实时预览界面. 准备工作 引入相关js和css 这里 ...
- 用nw.js开发markdown编辑器-已完成功能介绍
这里文章都是从个人的github博客直接复制过来的,排版可能有点乱. 原始地址 http://benq.im/2015/10/29/hexomd-introduction 文章目录 1. 功能列表 ...
随机推荐
- Android百分比布局支持库(android-percent-support)
Android中提供了五种布局,其中用的最多的就是:LinearLayout, RelativeLayout 和 FrameLayout这三种布局,在对某一界面进行布局时最先想到也是通过这三种来布局的 ...
- Android ROM开发(三)——精简官方ROM并且内置ROOT权限,开启Romer之路
Android ROM开发(三)--精简官方ROM并且内置ROOT权限,开启Romer之路 相信ROM的相关信息大家通过前几篇的学习都是有所了解了,这里就不在一一提示了,这里我们下载一个官方包,我们还 ...
- glib-dbus 在ubuntu9.10 和 ubuntu10.04 上安装环境的搭建
dbus-glib 安装环境搭建 安装 dbus apt-get install dbus 安装 d-feet ,用于查看 session bus 和 system bus apt-get insta ...
- 【Django】 gunicorn部署纪要
使用Gunicorn 来部署Django应用, 没有一步一步写怎么操作,简单记录下重要的点,方面以后查阅. 主要的方式还是Nginx反向代理到Gunicorn, Gunicorn wsgi来启动Dja ...
- day07_Tomcat服务器与http学习笔记
============================================================ 一.Tomcat服务器(很熟悉) 1.Web开发概述 WEB,在英语中web即 ...
- .Net C# 串口 Serialort safe handle has been closed 问题的解决
最近在一个平台上使用SerialPort类开发程序时,发现程序在使用SerialPort类时会异常退出,而且诡异的是,就算把所有操作串口的代码都放在try{}catch{}块中也无法捕获这个异常.最终 ...
- 关于在vim中的查找和替换
1,查找 在normal模式下按下/即可进入查找模式,输入要查找的字符串并按下回车. Vim会跳转到第一个匹配.按下n查找下一个,按下N查找上一个. Vim查找支持正则表达式,例如/vim$匹配行尾的 ...
- JS (全局作用域)
一.全局函数作用域(把变量的声明和函数的声明放在前面) 作用域(scope):一条数据可以在哪个范围中使用. 通常来说,一段程序代码中所用到的数据并不总是有效/可用的,而限定这个数据的可用性的代码范围 ...
- 安装 Anaconda 的正确姿势
下面以 Anaconda2 安装为例, 说明如何更加流畅的使用 Conda Install Anaconda2 安装 Anaconda2(从清华源下载比较快) wget https://mirrors ...
- JAVA代码设置selector不同状态下的背景颜色
代码实现Shape 代码实现Selector StateListDrawable与GradientDrawable 的运用 在Android开发中,我们时常会用到自定义drawable样式,在draw ...