Angular8 集成Meditor.md, 出色的markdown编辑器

Editor.md的官方地址:http://editor.md.ipandao.com/
我试过使用npm安装,以及使用“import”语法引进资源文件,但是没有成功,始终报“editormd is undefined”的错误,无奈,只能将资源先下载下来,然后本地引入。
1:将资源包下载好,放入assets文件夹里面
Angular8 集成Meditor.md, 出色的markdown编辑器_第1张图片
2. 该编辑器是依赖于Jquery的,所以也需要将Jquery下载好,放进assets/editor.md/lib目录下。
3. 在index.html中引入依赖资源
Angular8 集成Meditor.md, 出色的markdown编辑器_第2张图片
4. 在angular页面中集成编辑器
HTML:

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
编辑器集成好了,但是我们必不可少的还要完善它的图片上传功能,文档是这么描述的,如下图
Angular8 集成Meditor.md, 出色的markdown编辑器_第3张图片
需要在初始化的配置中再加入(这是同源上传实例,即不涉及跨域,若涉及跨域上传,详见: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     : "图片地址"        // 上传成功时才返回
}

如果疑问,请下方留言。

你可能感兴趣的:(Angular,markdown编辑器)