Angular 利用 marked.js 添加 Markdown + HTML 同时渲染的 Pipe

背景#

最近在公司开发的一个项目需要在 Angular 上展示图文，并且需要同时支持 Markdown 和 HTML

对于同时支持 Markdown 和 HTML ，应该要分为编辑和渲染两部分考虑。

对于编辑，目前尚未找到同时支持两种格式的编辑器。我个人认为 Markdown 最好的开源编辑器是 Editor.md，最好的 HTML 编辑器是 UEditor，虽然他们俩都已经很久很久没更新过……

所以在编辑页面就只能提供两个编辑器的切换，对于 Markdown 和 HTML 分部用各自的编辑器。 但是，我可以存到同一个字段吗？

这就要考虑到渲染了，如果能找到同时支持渲染 Markdown 和 HTML 的组件，我就不需要在后端把 Markdown 原文和渲染后的 HTML 分开字段存储了，还有利于对 Markdown 文本的修改。

于是找到了 marked.js

marked.js 介绍#

官方文档

marked.js 是一个普通的js库，并不是 Angular 特有的组件，所以我们在集成时还是需要进行一些编码。同时也说明它能支持其他前端框架，甚至是普通 HTML 的直接引用，非常轻量。

给 Angular 添加一个用于 Markdown 渲染的 Pipe#

Angular Pipe 是 Angular 中用于字符格式转换的组件，专门处理输出字符的转换，如日期、翻译等等在Angular开发中都比较常用。今天我们就给项目添加一个用于 Markdown 渲染的 Pipe。

一、npm 引用#

需要引用marked.js和它的 typescript 类型库来辅助模块声明

    npm install marked
    npm install @types/marked

二、创建 Pipe#

通过 angular-cli 创建 Pipe 文件

ng generate pipe marked

这样它能自动创建一个名为 "marked" 的 Pipe (marked.pipe.ts)，并导入到你的 app.module.ts 文件中了。

修改 marked.pipe.ts#

生成出来的 marked.pipe.ts 文件如下：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'marked'
})
export class MarkedPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return null;
  }

}

我们需要导入 marked , 然后修改 transform 方法来解析 Markdown 并返回 HTML 字符串。

更改之后的代码如下：

import { Pipe, PipeTransform } from "@angular/core";
import * as marked from "marked";

@Pipe({
  name: "marked"
})
export class MarkedPipe implements PipeTransform {
  transform(value: any): any {
    if (value && value.length > 0) {
      return marked(value);
    }
    return value;
  }
}

其中的 transform 方法将接受文本作为值，如果它有长度，则返回解析后的 HTML。否则，它只返回传递的值。

使用方法#

使用方法跟其他 Pipe 几乎差不多，但是有一点，就是如果渲染出来的是 HTML 字符串，需要让 Angular 自己在渲染成最终的 HTML，我们需要把 HTML 字符串传入到 Angular 模版中一个 HTML 元素的 innerHTML 属性中，举个例子：

// app.component.ts
...
public markdownString: string = 'This is text with **markdown**';
...

// app.component.html
...
<div [innerHTML]="markdownString | marked"></div>
...

总结#

这样就大功告成啦！你可以尝试使用同时含有 Markdown 和 HTML 的字符串，就像 Github 里众多开源项目的 README 文档一样，使用穿插着 HTML 排版的文档来渲染美观的图文。