mp-vue/EDITOR_SWITCH_DEMO.md

📝 编辑器切换功能演示

🎯 功能概述

我已经成功为文章编辑组件实现了Markdown和富文本编辑器的切换功能，具有以下特点：

✨ 核心功能

1. 编辑器类型选择器

   • 富文本编辑器（TinyMCE）：所见即所得，支持图片、视频、格式化
   • Markdown编辑器：轻量级标记语言，支持代码高亮

2. 智能切换机制

   • 有内容时会提示用户确认切换
   • 自动进行基本的格式转换
   • 保存用户的编辑器偏好设置

3. 数据持久化

   • 编辑器类型保存到数据库（editor字段：1=富文本，2=Markdown）
   • 本地存储用户偏好设置
   • 编辑时自动恢复用户选择的编辑器类型

🔧 技术实现

1. 编辑器选择器UI

<div class="editor-selector-container">
  <div class="editor-selector">
    <span class="selector-label">编辑器类型：</span>
    <a-radio-group 
      v-model:value="editor" 
      @change="onEditorTypeChange"
      class="editor-radio-group"
    >
      <a-radio :value="1" class="editor-radio">
        <span class="radio-content">
          <span class="radio-icon">📝</span>
          <span class="radio-text">富文本编辑器</span>
          <span class="radio-desc">所见即所得，支持图片、视频、格式化</span>
        </span>
      </a-radio>
      <a-radio :value="2" class="editor-radio">
        <span class="radio-content">
          <span class="radio-icon">📋</span>
          <span class="radio-text">Markdown编辑器</span>
          <span class="radio-desc">轻量级标记语言，支持代码高亮</span>
        </span>
      </a-radio>
    </a-radio-group>
  </div>
</div>

2. 切换处理逻辑

const onEditorTypeChange = (e: any) => {
  const newEditorType = e.target.value;
  const oldEditorType = editor.value;
  
  // 如果有内容，提示用户确认切换
  if (content.value && content.value.trim() !== '' && content.value !== '<p><br></p>') {
    Modal.confirm({
      title: '🔄 切换编辑器类型',
      content: '切换编辑器类型可能会影响内容格式，是否继续？',
      okText: '确认切换',
      cancelText: '取消',
      onOk: () => {
        performEditorSwitch(newEditorType, oldEditorType);
      },
      onCancel: () => {
        editor.value = oldEditorType;
      }
    });
  } else {
    performEditorSwitch(newEditorType, oldEditorType);
  }
};

3. 格式转换功能

const convertContentFormat = (fromType: number, toType: number) => {
  if (fromType === 1 && toType === 2) {
    // 富文本转Markdown
    let markdownContent = content.value
      .replace(/<h1[^>]*>(.*?)<\/h1>/gi, '# $1\n\n')
      .replace(/<h2[^>]*>(.*?)<\/h2>/gi, '## $1\n\n')
      .replace(/<strong[^>]*>(.*?)<\/strong>/gi, '**$1**')
      .replace(/<em[^>]*>(.*?)<\/em>/gi, '*$1*')
      // ... 更多转换规则
    content.value = markdownContent;
  } else if (fromType === 2 && toType === 1) {
    // Markdown转富文本
    let htmlContent = content.value
      .replace(/^# (.*$)/gim, '<h1>$1</h1>')
      .replace(/^## (.*$)/gim, '<h2>$1</h2>')
      .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
      .replace(/\*(.*?)\*/g, '<em>$1</em>')
      // ... 更多转换规则
    content.value = htmlContent;
  }
};

4. 偏好设置管理

const initEditorPreference = () => {
  // 优先使用数据库中保存的编辑器类型
  if (form.editor && (form.editor === 1 || form.editor === 2)) {
    editor.value = form.editor;
  } else {
    // 使用本地存储的偏好
    const savedPreference = localStorage.getItem('cms_article_editor_preference');
    if (savedPreference && (savedPreference === '1' || savedPreference === '2')) {
      editor.value = parseInt(savedPreference);
    } else {
      editor.value = 1; // 默认富文本
    }
  }
};

🎨 样式设计

编辑器选择器采用了现代化的卡片设计：

• 渐变背景和阴影效果
• 清晰的图标和描述文字
• 响应式交互效果
• 与现有UI风格保持一致

📊 数据库字段

在CmsArticle模型中，editor字段用于保存编辑器类型：

• 1: 富文本编辑器
• 2: Markdown编辑器

🚀 使用方式

1. 新建文章：系统会根据用户偏好自动选择编辑器类型
2. 编辑文章：自动恢复文章创建时使用的编辑器类型
3. 切换编辑器：用户可以随时切换，系统会智能处理格式转换
4. 保存文章：编辑器类型会自动保存到数据库

💡 用户体验优化

• 智能提示：切换前会提示可能的格式影响
• 格式转换：自动进行基本的HTML↔Markdown转换
• 偏好记忆：记住用户的编辑器选择偏好
• 无缝切换：保持内容的连续性和一致性

这个功能让用户可以根据自己的习惯和需求选择最适合的编辑器，提供了更加灵活和人性化的编辑体验！