摘要:

搭建个人博客时,涉及文章上传,文章展示,这里需要一个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. HTML 学习笔记一

    一.学习HTML有什么用? 可以写网页,也就是网站上的一个页面. 二.HTML 代码是写给谁看的? HTML代码是给浏览器看的,当然,强大的人类也能看得懂,如果你觉得不累的话. 三.HTML的结构 & ...

  2. 【C++程序员学 python】python split and join 分割与合并

    感觉这名字有点不对,但不知道用什么好,就将就吧. 坑爹啊,居然要把符号放在前面.

  3. WCF 服务应用程序与 服务库之间的区别

    简单理解, WCF服务库,可以认为是一个包含WCF服务以及契约定义的类库.这儿库还不能直接运行,你可以在其他项目里引用,在宿主里启用托管这个库. 而WCF应用程序,是一个可以执行的程序,它有独立的进程 ...

  4. MyBatis 之 SqlSessionManager 源码分析

    MyBatis 的 4 个基本构成: SqlSessionFactoryBuilder(构造器): 根据配置信息或者代码来生成 SqlSessionFactory(工厂接口) SqlSessionFa ...

  5. git学习(七):git 对象库

    git log -l -pretty=raw // 查看日志 -l是干啥的 git log -pretty=raw // git cat-file -t 哈希值 // 查看id的类型 不知道为啥这里我 ...

  6. C语言 · 陶陶摘苹果2

    算法提高 陶陶摘苹果2   时间限制:1.0s   内存限制:256.0MB      问题描述 陶陶家的院子里有一棵苹果树,每到秋天树上就会结出n个苹果.苹果成熟的时候,陶陶就会跑去摘苹果.陶陶有个 ...

  7. 一场由SD卡引发的灾难_转

      注:此文章转自“https://user.qzone.qq.com/63915185/blog/1512562541”.   Flash里面的数据在使用过程中莫名改变或不翼而飞?程序丢失可能无法正 ...

  8. face alignment---各种算法框架

    [深度学习]最新的一些开源face alignment及评价 转载  2017年01月12日 11:33:39 2047 dlib :https://github.com/davisking/dlib ...

  9. Knockout开发中文API系列4–监控属性数组

    PS:这个翻译系列好久都没有更新了,实在是不应该,一方面是由于时间不多,另一方面也由于自身惰性太大,从今天起接着更新,会在最近的一月内把这个系列中文API文档翻译完整. 如果你想侦测并响应一个对象的变 ...

  10. CSS非ASCII字符最佳实践

    问题场景 在写样式时经常需要用到非ASCII字符的属性值,如下: ? 1 2 3 4 5 6 7 8 9 10 11 .hot_list .sign_discount:before {    cont ...