Vue3+Vite实现一个Markdown编辑器组件

npm create vite@latest markdown-editor --template vue-ts
cd markdown-editor

npm install marked highlight.js

<template>
  <div class="markdown-editor">
    <textarea
      v-model="content"
      class="editor-textarea"
      placeholder="请输入 Markdown 内容..."
      @input="saveToLocalStorage"
    ></textarea>
    <div class="preview">
      <div v-html="renderedContent" class="preview-content"></div>
    </div>
    <div class="export-buttons">
      <button @click="exportMarkdown">导出 Markdown</button>
      <button @click="exportHTML">导出 HTML</button>
    </div>
    <div class="file-upload">
      <input type="file" @change="handleFileUpload" />
      <p>上传图片并在 Markdown 中显示</p>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed, onMounted } from 'vue';
import { marked } from 'marked';
import hljs from 'highlight.js';

export default defineComponent({
  name: 'MarkdownEditor',
  setup() {
    const content = ref('');
    const fileUrl = ref<string | null>(null);

    // 从本地存储加载内容
    onMounted(() => {
      const savedContent = localStorage.getItem('markdown-content');
      if (savedContent) {
        content.value = savedContent;
      }
    });

    // 将 Markdown 转换为 HTML 并加上语法高亮
    const renderedContent = computed(() => {
      marked.setOptions({
        highlight: (code: string) => {
          return hljs.highlightAuto(code).value;
        },
      });
      return marked(content.value);
    });

    // 保存内容到本地存储（自动保存）
    const saveToLocalStorage = () => {
      localStorage.setItem('markdown-content', content.value);
    };

    // 导出 Markdown 内容
    const exportMarkdown = () => {
      const blob = new Blob([content.value], { type: 'text/markdown' });
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = 'document.md';
      link.click();
    };

    // 导出 HTML 内容
    const exportHTML = () => {
      const blob = new Blob([renderedContent.value], { type: 'text/html' });
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = 'document.html';
      link.click();
    };

    // 文件上传功能
    const handleFileUpload = (event: Event) => {
      const fileInput = event.target as HTMLInputElement;
      const file = fileInput.files ? fileInput.files[0] : null;
      if (file) {
        const reader = new FileReader();
        reader.onload = () => {
          const imageUrl = reader.result as string;
          fileUrl.value = imageUrl; // 存储图片的 URL
          const markdownImage = `![image](${imageUrl})`; // 将图片路径转化为 Markdown 格式
          content.value += `\n\n${markdownImage}\n`; // 插入到 Markdown 内容中
        };
        reader.readAsDataURL(file); // 将图片读取为 Data URL
      }
    };

    return {
      content,
      renderedContent,
      exportMarkdown,
      exportHTML,
      handleFileUpload,
    };
  },
});
</script>

<style scoped>
.markdown-editor {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}

.editor-textarea {
  width: 100%;
  height: 300px;
  padding: 10px;
  font-size: 16px;
  line-height: 1.5;
  border: 1px solid #ccc;
  border-radius: 8px;
  resize: none;
}

.preview {
  background-color: #f8f8f8;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  min-height: 300px;
}

.preview-content {
  max-width: 100%;
  word-wrap: break-word;
}

.export-buttons {
  display: flex;
  gap: 10px;
}

button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

.file-upload {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

input[type="file"] {
  padding: 5px;
}
</style>

// 保存内容到本地存储（自动保存）
const saveToLocalStorage = () => {
  localStorage.setItem('markdown-content', content.value);
};

// 文件上传功能
const handleFileUpload = (event: Event) => {
  const fileInput = event.target as HTMLInputElement;
  const file = fileInput.files ? fileInput.files[0] : null;
  if (file) {
    const reader = new FileReader();
    reader.onload = () => {
      const imageUrl = reader.result as string;
      fileUrl.value = imageUrl; // 存储图片的 URL
      const markdownImage = `![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=%24%7BimageUrl%7D&pos_id=img-QEVKHwoM-1744165078772)`; // 将图片路径转化为 Markdown 格式
      content.value += `\n\n${markdownImage}\n`; // 插入到 Markdown 内容中
    };
    reader.readAsDataURL(file); // 将图片读取为 Data URL
  }
};