6、使用 TypeScript 创建 Markdown 编辑器

使用 TypeScript 创建 Markdown 编辑器

在开发 Markdown 编辑器的过程中，我们需要考虑多个方面，包括如何存储解析后的内容、如何应用不同的 HTML 标签以及如何处理用户输入的文本。下面将详细介绍实现一个简单 Markdown 编辑器的步骤和相关代码。

1. 使用 Markdown 文档表示转换后的 Markdown

在解析内容时，我们需要一种机制来存储解析过程中创建的文本。直接使用全局字符串并直接更新它会带来问题，尤其是在异步添加内容时。为了遵循单一职责原则，我们创建一个接口和类来处理这个问题。

interface IMarkdownDocument {
    Add(...content : string[]) : void;
    Get() : string;
}

class MarkdownDocument implements IMarkdownDocument {
    private content : string = "";
    Add(...content: string[]): void {
        content.forEach(element => {
            this.content += element;
        });
    }
    Get(): string {
        return this.content;
    }
}

这个 MarkdownDocument 类非常简单，它接受多个字符串作为内容，并将它们添加到一