Markdown编辑器

一个现代化的在线Markdown编辑器，支持实时预览、语法高亮和导出功能

2024年1月20日

ReactMarkdownCodeMirror

项目概述

这是一个功能丰富的Markdown编辑器，提供流畅的编辑体验和实时预览功能。

主要特性

✍️ 实时预览
🎨 语法高亮
📱 响应式设计
💾 本地存储
📥 导出PDF/HTML
🌓 深色模式

技术实现

编辑器核心

使用CodeMirror 6作为编辑器核心：

import { EditorView, basicSetup } from 'codemirror'
import { markdown } from '@codemirror/lang-markdown'
 
const editor = new EditorView({
  doc: initialContent,
  extensions: [
    basicSetup,
    markdown(),
    EditorView.updateListener.of((update) => {
      if (update.docChanged) {
        handleChange(update.state.doc.toString())
      }
    })
  ],
  parent: editorElement
})

Markdown渲染

import { marked } from 'marked'
import DOMPurify from 'dompurify'
 
function renderMarkdown(content: string) {
  const html = marked(content)
  return DOMPurify.sanitize(html)
}

核心功能实现

本地存储

function useAutoSave(content: string) {
  useEffect(() => {
    const timer = setTimeout(() => {
      localStorage.setItem('draft', content)
    }, 1000)
 
    return () => clearTimeout(timer)
  }, [content])
}

导出功能

async function exportToPDF(content: string) {
  const html = renderMarkdown(content)
  const pdf = await htmlToPdf(html)
  downloadFile(pdf, 'document.pdf')
}

总结

这个项目让我学会了如何构建一个实用的在线工具，特别是编辑器的实现细节。