Editor.md的官方地址:http://editor.md.ipandao.com/
我试过使用npm安装,以及使用“import”语法引进资源文件,但是没有成功,始终报“editormd is undefined”的错误,无奈,只能将资源先下载下来,然后本地引入。
1:将资源包下载好,放入assets文件夹里面
2. 该编辑器是依赖于Jquery的,所以也需要将Jquery下载好,放进assets/editor.md/lib目录下。
3. 在index.html中引入依赖资源
4. 在angular页面中集成编辑器
HTML:
<div id="container">
<textarea id="markdown" style="display: none;"></textarea>
</div>
TS:
import { Component, OnInit, AfterViewInit } from '@angular/core';
declare const editormd: any;
@Component({
selector: 'app-write-blog',
templateUrl: './write-blog.component.html',
styleUrls: ['./write-blog.component.less']
})
export class WriteBlogComponent implements OnInit, AfterViewInit {
editor: any;
constructor() { }
ngOnInit() {
}
ngAfterViewInit() {
this.initMarkdown();
}
initMarkdown() {
this.editor = editormd('container', {
width: '100%',
height: '100%',
path: 'assets/editor.md/lib/',
});
}
}
至此,编辑器就集成好了,也可将初始化编辑器做成自定义指令,然后进行使用,附上别人的链接:https://gitee.com/imlxp/ngx-editor.md-markdown
编辑器集成好了,但是我们必不可少的还要完善它的图片上传功能,文档是这么描述的,如下图
需要在初始化的配置中再加入(这是同源上传实例,即不涉及跨域,若涉及跨域上传,详见:http://editor.md.ipandao.com/examples/image-cross-domain-upload.html):
imageUpload: true,
imageFormats: ['jpg', 'jpeg', 'gif', 'png', 'bmp', 'webp', 'svg'],
imageUploadURL: '/api/v1/uploadFile', // 这是图片上传的接口名称,此处一以我自己的为例。
前端的图片上传就好了,需要注意的是,由于前端的图片上传都是用formData上传的,所以接口对应的接收的前端参数需要是 “editormd-image-file”,如果不是这个,就会出现接口访问错误,此外,接口的返回格式要同文档上描述的一摸一样,否则也是上传会出错的:
接口返回的格式需要包含以下字段:
{
success : 0 | 1, // 0 表示上传失败,1 表示上传成功
message : "提示的信息,上传成功或上传失败及错误信息等。",
url : "图片地址" // 上传成功时才返回
}
如果疑问,请下方留言。