zoukankan      html  css  js  c++  java
  • 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 排版的文档来渲染美观的图文。

  • 相关阅读:
    线性代数思维导图——3.向量
    微分中值定理的基础题型总结
    构造函数
    Python课程笔记(七)
    0241. Different Ways to Add Parentheses (M)
    0014. Longest Common Prefix (E)
    0013. Roman to Integer (E)
    0011. Container With Most Water (M)
    0010. Regular Expression Matching (H)
    0012. Integer to Roman (M)
  • 原文地址:https://www.cnblogs.com/ElderJames/p/add-Markdown-and-html-rendering-pipe-in-Angular-using-markedjs.html
Copyright © 2011-2022 走看看