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

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     : "图片地址"        // 上传成功时才返回
}

如果疑问,请下方留言。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

废柴前端

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值