NodeJS+Angular Cli博客开发：如何在MongoDB存储富文本数据

Hey there! Let's break down how to solve your rich text storage and rendering problem for your personal blog. Here's a practical, step-by-step approach:

1. Adjust Your MongoDB Schema (No Major Overhaul Needed!) #

Your current schema's body: String is actually totally fine for rich text—because rich text (whether HTML, Markdown, or formatted strings) is just text at the end of the day. That said, you can add an optional field to track the format type to make front-end handling easier:

const blogSchema = new Schema({
  title: { type: String, required: true },
  body: { type: String, required: true }, // Will store HTML/Markdown/formatted string
  createdBy: { type: String },
  format: { type: String, default: 'html' } // Optional: 'markdown' or 'html'
});

No need to switch to an Object type unless you want to store highly structured content (like individual blocks with metadata)—for most blogs, a string works perfectly.

2. Capture Rich Text Input in Your Frontend #

You'll need a rich text editor to let users create content with paragraphs, formulas, etc. Here are two common paths:

Option A: Use HTML-Based Editors (e.g., TinyMCE, CKEditor) #

These editors output raw HTML, which you can send directly to your Node.js backend and store in the body field. They often have built-in support for inserting LaTeX formulas (via plugins) or you can add a formula input tool that generates the necessary HTML/LaTeX markup.

Option B: Use Markdown Editors (e.g., SimpleMDE, Markdown-It) #

If you prefer Markdown's simplicity, these editors generate Markdown strings. For formulas, users can write LaTeX syntax like $$E=mc^2$$, which you'll render later in the frontend.

3. Render Rich Text in Angular #

Rendering HTML #

Your current {{blog.body}} will escape HTML (for security), so use Angular's [innerHTML] directive to render raw HTML:

<!-- In your blog post component template -->
<div class="blog-content" [innerHTML]="blog.body"></div>

Rendering Markdown #

First, convert Markdown to HTML using a library like marked:

1. Install it: npm install marked
2. In your component:

import { marked } from 'marked';
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-blog-post',
  templateUrl: './blog-post.component.html'
})
export class BlogPostComponent {
  @Input() blog: any; // Your blog post object

  getRenderedContent(): string {
    return marked.parse(this.blog.body);
  }
}

3. In the template:

<div class="blog-content" [innerHTML]="getRenderedContent()"></div>

Rendering Formulas (LaTeX) #

For formulas, use a library like KaTeX or MathJax to render LaTeX syntax. Let's use KaTeX as an example:

1. Install dependencies: npm install katex
2. Import the CSS and library in your component:

import katex from 'katex';
import 'katex/dist/katex.min.css';
import { AfterViewInit, Component, Input } from '@angular/core';

@Component({
  selector: 'app-blog-post',
  templateUrl: './blog-post.component.html'
})
export class BlogPostComponent implements AfterViewInit {
  @Input() blog: any;

  ngAfterViewInit() {
    // Render all formulas in the content
    const formulaElements = document.querySelectorAll('.math');
    formulaElements.forEach(el => {
      katex.render(el.textContent || '', el, {
        throwOnError: false, // Ignore minor syntax errors
        displayMode: true
      });
    });
  }

  // If using Markdown, adjust the parse to wrap formulas in .math classes
  getRenderedContent(): string {
    return marked.parse(this.blog.body, {
      extensions: [{
        name: 'math',
        level: 'block',
        start(src) { return src.match(/\$\$/)?.index; },
        tokenizer(src, tokens) {
          const rule = /^\$\$([\s\S]+?)\$\$/;
          const match = rule.exec(src);
          if (match) {
            return {
              type: 'math',
              raw: match[0],
              text: match[1].trim()
            };
          }
        },
        renderer(token) {
          return `<div class="math">${token.text}</div>`;
        }
      }]
    });
  }
}

4. Critical Security Note: Prevent XSS Attacks #

When rendering user-generated HTML, you risk cross-site scripting (XSS) attacks. Always sanitize the input on the backend before storing it. Use the sanitize-html library:

const sanitizeHtml = require('sanitize-html');

// In your Node.js route handler
const cleanHtml = sanitizeHtml(req.body.body, {
  allowedTags: ['p', 'h1', 'h2', 'h3', 'strong', 'em', 'ul', 'ol', 'li', 'code', 'div', 'span'],
  allowedAttributes: {} // Restrict attributes to prevent malicious scripts
});

// Then save cleanHtml to the blog's body field

Angular's [innerHTML] also does basic sanitization, but backend sanitization is non-negotiable for user-generated content.

内容的提问来源于stack exchange，提问作者Xingsong Lin