Markdown编辑器Editor.md使用方式
摘要:
搭建个人博客时,涉及文章上传,文章展示,这里需要一个Markdown插件,mark一下。
Editormd下载地址:http://pandao.github.io/editor.md/
由于前端采用了SPA模式,这里我们需要在index.html页面引入editormd的相关文件。
文件上传页面配置:
dom部分:
<div id="write-editormd">
<textarea></textarea>
</div>
脚本部分(上传功能):
initEditer() {
this.testEditor = editormd("write-editormd", {
placeholder: '开始', //默认显示的文字,这里就不解释了
width: "100%",
height: 640,
syncScrolling: "single",
path: "editor/lib/", //你的path路径(原资源文件中lib包在我们项目中所放的位置)
theme: "dark",//工具栏主题
previewTheme: "dark",//预览主题
editorTheme: "pastel-on-dark",//编辑主题
saveHTMLToTextarea: true,
emoji: false,
taskList: true,
tocm: true, // Using [TOCM]
tex: true, // 开启科学公式TeX语言支持,默认关闭
flowChart: true, // 开启流程图支持,默认关闭
sequenceDiagram: true, // 开启时序/序列图支持,默认关闭,
toolbarIcons: function () { //自定义工具栏,后面有详细介绍
return editormd.toolbarModes['simple']; // full, simple, mini
},
/**上传图片相关配置如下*/
imageUpload: true,
imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL: "./api/document/upload"
});
}
获取文件内容:
var content = this.testEditor.getMarkdown();
展示文章页面配置:
dom部分:
<div id="read-editormd">
<textarea></textarea>
</div>
脚本部分:
initEditer() {
var testEditor;
testEditor = editormd.markdownToHTML("read-editormd", {
markdown: this.state.data.content,
htmlDecode: "style,script,iframe", // you can filter tags decode
emoji: true,
taskList: true,
tex: true,
flowChart: true,
sequenceDiagram: true,
imageUpload : true,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
// imageUploadURL : "../src/",//注意你后端的上传图片服务地址 //editorTheme: "pastel-on-dark",//编辑器的主题颜色
theme: "gray",//顶部的主题
previewTheme: "dark"//显示的主题
});
testEditor.getMarkdown();
}
图片上传功能配置:
在编辑配置部分配置
/**上传图片相关配置如下*/
imageUpload: true,
imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL: "./api/document/upload"
打开图片上传功能设置imageUpload: true
上传图片可以设置具体支持图片类型imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"]
图片上传调用路由设置imageUploadURL: "./api/document/upload"
后台图片保存服务器代码(这里用nodejs实现):
router.post('/upload', function (req, res) {
if (req.busboy) {
req.busboy.on('file', function (fieldname, file, filename, encoding, mimetype) {
var saveTo = path.join(__dirname, "../../", "build/src/" + filename);
file.pipe(fs.createWriteStream(saveTo));
file.on('end', function () {
var a = res;
res.json({
success: true
});
});
});
req.pipe(req.busboy);
}
})
node处理图片上传使用busboy插件
var busboy = require('connect-busboy');
控件中上传图片dialog源码使用的表单上传文件方式。(image-dialog.js)
var dialogContent = ((settings.imageUpload) ? "<form action=\"" + action + "\" target=\"" + iframeName + "\" method=\"post\" enctype=\"multipart/form-data\" class=\"" + classPrefix + "form\">" : "<div class=\"" + classPrefix + "form\">") +
((settings.imageUpload) ? "<iframe name=\"" + iframeName + "\" id=\"" + iframeName + "\" guid=\"" + guid + "\"></iframe>" : "") +
"<label>" + imageLang.url + "</label>" +
"<input type=\"text\" data-url />" + (function () {
return (settings.imageUpload) ? "<div class=\"" + classPrefix + "file-input\">" +
"<input type=\"file\" name=\"" + classPrefix + "image-file\" accept=\"image/*\" />" +
"<input type=\"submit\" value=\"" + imageLang.uploadButton + "\" />" +
"</div>" : "";
})() +
"<br/>" +
"<label>" + imageLang.alt + "</label>" +
"<input type=\"text\" value=\"" + selection + "\" data-alt />" +
"<br/>" +
"<label>" + imageLang.link + "</label>" +
"<input type=\"text\" value=\"http://\" data-link />" +
"<br/>" +
((settings.imageUpload) ? "</form>" : "</div>");
如果文件不好使,或者不适应表单上传,我们可以更改上传方式,
loading(true);
var file = e.target.files[0];
var data = new FormData();
data.append('file', file);
var request = {
method: 'POST',
// headers: {
// 'Content-Type': 'multipart/form-data',
// 'Accept': 'application/json'
// },
body: data
};
fetch(action, request).then(res => {
if (res.ok)
return res;
loading(false);
}).then(res => {
return res.responseString;
}).then(res => {
var a = res;
loading(false);
}).catch(e => {
loading(false);
console.log(e);
})
注:后台使用busboy的时候上传文件时候不能设置媒体类型,不然后台会直接在busboy中报错。
以上为editormd的使用以及图片上传方式实现,如果哪里有写的不清楚,或者建议感谢指正,谢谢。
Markdown编辑器Editor.md使用方式的更多相关文章
- Markdown编辑器editor.md的使用---markdown上传图片
http://kindeditor.org/ 确定下有没有查找替换功能 http://pandao.github.io/editor.md/ http://pandao.github.io/edito ...
- 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 ...
- 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 ...
- Markdown编辑器的使用
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/LoveJavaYDJ/article/details/73692917 一.Markdown和edi ...
- springboot结合开源editor.md集成markdonw编辑器
今天来实现一个简单的功能,通常blog后台编辑大多使用的是富文本编辑器,比如百度的Ueditor,比较轻巧的wangEditor,那么如何使用开源editor.md的markdown呢? 搭建一个sp ...
- CSDN新版Markdown编辑器(Alpha 2.0版)使用示例(文首附源码.md文件)
CSDN新版Markdown编辑器(Alpha 2.0版) 使用示例 附 本文的Markdown源码: https://github.com/yanglr/AlgoSolutions/blob/mas ...
随机推荐
- C#学习笔记(20)——使用IComparer(自己写的)
说明(2017-7-25 10:38:37): 1. 参照了上一篇百度文库里的文章. 2. 总结来看,Icomparer就是sort方法的一个参数,用来自定义一个排序规则. 3. 使用方法是,定义一个 ...
- 一次简单的ctf SQL注入绕过
注入地址:http://103.238.227.13:10087/index.php?id=1 //过滤sql $array = array('table','union','and','or','l ...
- adc 测量子系统
#include <stdio.h> #include <stdlib.h> #include <fcntl.h> # ...
- 非常有用的15个Linux 服务器监控命令
如果你想知道你的服务器正在做干什么,你就需要了解一些基本的命令,一旦你精通了这些命令,那你就是一个 专业的 Linux 系统管理员. 有些 Linux 发行版会提供 GUI 程序来进行系统的监控,例如 ...
- 【随记】Q号解除限制一波三折
平日里养了一批QQ号码,前段时间部分号码出问题了,在一个不可能是我登录的时间登录了,而且还异常操作了.结果,被QQ安全中心关进了小黑屋,让我发送手机短信去领回来.这是事情的背景,不细述了. 这个事情的 ...
- 测试word发表博客
哈哈哈 我测试一下 <ul class="clearfix"> <li> <div><img src="{IMG_PATH}qr ...
- python获取上一个月第一天0点的unix时间戳
这两天做统计,需要用到当月第一天0点0分0秒的unix timestamp,上个月第一天0点的unix时间戳,三个月前月第一天的0点的Unix时间戳,六个月前当月第一天的0点的Unix时间戳,现在整理 ...
- altium designer 快捷键
2010年03月27日 环境快捷键 F1 访问文档库 (in context with object under cursor) Ctrl + O 访问选择的文档打开对话框 Ctrl + F4 关闭活 ...
- 关于Unity中蒙皮网格和布料的使用
所以物体的要绘制出来就必须要有网格组件+材质属性,如果还需要其他特效或丰富内容的话,还可以再加组件. 蒙皮网格和布料 1: 例如要模拟衣服,随风摆动,模拟布料需要用到蒙皮网格和布料;2: 蒙皮网格可以 ...
- Linux:Tomcat报错: Error creating bean with name 'mapScheduler' defined in ServletContext resource 的解决方法
2013-12-31 14:22:28 [ERROR] [ContextLoader.java->initWebApplicationContext(220) Context initializ ...