摘要:

搭建个人博客时,涉及文章上传,文章展示,这里需要一个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使用方式的更多相关文章

  1. Markdown编辑器editor.md的使用---markdown上传图片

    http://kindeditor.org/ 确定下有没有查找替换功能 http://pandao.github.io/editor.md/ http://pandao.github.io/edito ...

  2. Markdown编辑器editor.md的使用

      目录(?)[-] 一Markdown和editormd简介 二editormd的使用 1下载 2简单使用 21在自己的页面上引入相关的css和js代码如下 22在自己的页面中加上DIV 23在同页 ...

  3. thinkphp5使用Markdown编辑器Editor.md并上传图片

    Editor.md官网:https://pandao.github.io/editor.md/index.html 下载后解压放到项目内,和引入ueditor差不多 1.引入项目资源 <!--m ...

  4. JAVA WEB项目中使用并改造editor.md实现Markdown编辑器

    Markdown和Editor.md简介 Markdwon编辑器在技术工作者圈子中已经越来越流行,简单的语法,统一的格式,强大的扩展功能,最重要的是:你可以用Markdown,设计一篇精彩绝伦的文档而 ...

  5. editor.md实现Markdown编辑器

    editor.md实现Markdown编辑器 Markdown和Editor.md简介 Markdwon编辑器在技术工作者圈子中已经越来越流行,简单的语法,统一的格式,强大的扩展功能,最重要的是:你可 ...

  6. 好用的Markdown编辑器一览 readme.md 编辑查看

    https://github.com/pandao/editor.md https://pandao.github.io/editor.md/examples/index.html Editor.md ...

  7. Markdown编辑器的使用

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/LoveJavaYDJ/article/details/73692917 一.Markdown和edi ...

  8. springboot结合开源editor.md集成markdonw编辑器

    今天来实现一个简单的功能,通常blog后台编辑大多使用的是富文本编辑器,比如百度的Ueditor,比较轻巧的wangEditor,那么如何使用开源editor.md的markdown呢? 搭建一个sp ...

  9. CSDN新版Markdown编辑器(Alpha 2.0版)使用示例(文首附源码.md文件)

    CSDN新版Markdown编辑器(Alpha 2.0版) 使用示例 附 本文的Markdown源码: https://github.com/yanglr/AlgoSolutions/blob/mas ...

随机推荐

  1. C#学习笔记(20)——使用IComparer(自己写的)

    说明(2017-7-25 10:38:37): 1. 参照了上一篇百度文库里的文章. 2. 总结来看,Icomparer就是sort方法的一个参数,用来自定义一个排序规则. 3. 使用方法是,定义一个 ...

  2. 一次简单的ctf SQL注入绕过

    注入地址:http://103.238.227.13:10087/index.php?id=1 //过滤sql $array = array('table','union','and','or','l ...

  3. adc 测量子系统

    #include <stdio.h>        #include <stdlib.h>         #include <fcntl.h>         # ...

  4. 非常有用的15个Linux 服务器监控命令

    如果你想知道你的服务器正在做干什么,你就需要了解一些基本的命令,一旦你精通了这些命令,那你就是一个 专业的 Linux 系统管理员. 有些 Linux 发行版会提供 GUI 程序来进行系统的监控,例如 ...

  5. 【随记】Q号解除限制一波三折

    平日里养了一批QQ号码,前段时间部分号码出问题了,在一个不可能是我登录的时间登录了,而且还异常操作了.结果,被QQ安全中心关进了小黑屋,让我发送手机短信去领回来.这是事情的背景,不细述了. 这个事情的 ...

  6. 测试word发表博客

    哈哈哈 我测试一下 <ul class="clearfix"> <li> <div><img src="{IMG_PATH}qr ...

  7. python获取上一个月第一天0点的unix时间戳

    这两天做统计,需要用到当月第一天0点0分0秒的unix timestamp,上个月第一天0点的unix时间戳,三个月前月第一天的0点的Unix时间戳,六个月前当月第一天的0点的Unix时间戳,现在整理 ...

  8. altium designer 快捷键

    2010年03月27日 环境快捷键 F1 访问文档库 (in context with object under cursor) Ctrl + O 访问选择的文档打开对话框 Ctrl + F4 关闭活 ...

  9. 关于Unity中蒙皮网格和布料的使用

    所以物体的要绘制出来就必须要有网格组件+材质属性,如果还需要其他特效或丰富内容的话,还可以再加组件. 蒙皮网格和布料 1: 例如要模拟衣服,随风摆动,模拟布料需要用到蒙皮网格和布料;2: 蒙皮网格可以 ...

  10. 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 ...