mp-vue/段落首行缩进切换功能说明.md

📐 段落首行缩进切换功能说明

🎯 功能概述

新增了一个智能的段落首行缩进切换功能，让用户可以根据需要快速切换中文段落的首行缩进格式。

✨ 功能特点

🔄 智能切换

• 自动检测：智能检测当前段落是否已有首行缩进
• 一键切换：点击按钮即可在有缩进/无缩进之间切换
• 批量处理：一次性处理文章中的所有段落

📝 中文优化

• 标准缩进：使用 2em 的首行缩进，符合中文排版规范
• 智能识别：只对段落标签 <p> 进行处理
• 样式保持：保留段落的其他样式属性

🎨 用户体验

• 友好提示：使用 emoji 和温馨文案
• 状态反馈：清晰显示当前操作结果
• 错误处理：完善的异常处理和用户指导

🛠️ 技术实现

按钮配置

// 添加段落首行缩进切换按钮
editor.ui.registry.addButton('toggle_indent', {
  text: '首行缩进',
  icon: 'indent',
  tooltip: '切换段落首行缩进（适合中文排版）',
  onAction: () => {
    toggleParagraphIndent(editor);
  }
});

核心功能

// 🔄 段落首行缩进切换功能
const toggleParagraphIndent = (editor: any) => {
  // 1. 检查内容
  // 2. 检测当前缩进状态
  // 3. 执行相应操作（添加/移除）
  // 4. 显示操作结果
}

添加缩进算法

const addIndentToParagraphs = (content: string): string => {
  return content.replace(/<p([^>]*)>/g, (match, attrs) => {
    if (attrs.includes('style=')) {
      if (attrs.includes('text-indent')) {
        // 更新现有的 text-indent
        return match.replace(/text-indent:\s*[^;]+;?/g, 'text-indent: 2em;');
      } else {
        // 在现有 style 中添加 text-indent
        return match.replace(/style="([^"]*)"/, 'style="$1 text-indent: 2em;"');
      }
    } else {
      // 添加新的 style 属性
      return `<p${attrs} style="text-indent: 2em;">`;
    }
  });
};

移除缩进算法

const removeIndentFromParagraphs = (content: string): string => {
  return content.replace(/<p([^>]*)>/g, (match, attrs) => {
    if (attrs.includes('text-indent')) {
      // 移除 text-indent 属性
      let newAttrs = attrs.replace(/text-indent:\s*[^;]+;?\s*/g, '');
      
      // 如果 style 属性变空了，移除整个 style 属性
      newAttrs = newAttrs.replace(/style="\s*"/g, '');
      newAttrs = newAttrs.replace(/style=''\s*/g, '');
      
      return `<p${newAttrs}>`;
    }
    return match;
  });
};

🧪 使用方法

1. 准备内容

在富文本编辑器中输入一些段落内容：

这是第一个段落，用来测试首行缩进功能。

这是第二个段落，也是用来测试的内容。

这是第三个段落，包含更多的文字内容来展示效果。

2. 切换缩进

1. 点击工具栏的"首行缩进"按钮
2. 观察提示信息：
   • 添加缩进时：📐 已添加段落首行缩进
   • 移除缩进时：📐 已移除段落首行缩进

3. 验证效果

• 有缩进时：每个段落的第一行会向右缩进 2 个字符的距离
• 无缩进时：段落恢复到左对齐状态

🎯 应用场景

📚 中文文章

• 学术论文：符合中文学术写作规范
• 新闻报道：传统中文排版习惯
• 小说散文：提升阅读体验

🌍 多语言内容

• 中英混排：可以选择性应用缩进
• 灵活切换：根据内容类型调整格式
• 用户偏好：满足不同用户的排版需求

💡 设计亮点

🎨 人性化设计

• 直观操作：一键切换，简单易用
• 智能检测：自动判断当前状态
• 友好反馈：清晰的操作提示

🔧 技术优势

• 正则匹配：精确处理 HTML 标签
• 样式保持：不影响其他段落样式
• 兼容性好：与现有功能完美配合

🚀 扩展性强

• 模块化设计：独立的功能模块
• 易于维护：清晰的代码结构
• 可扩展：可以轻松添加更多排版选项

🔍 错误处理

内容检查

• 空内容提示：📝 请先输入一些段落内容，然后再切换首行缩进
• 异常处理：🔧 首行缩进切换失败，请重试

状态检测

• 智能识别：检查 text-indent: 2em 或 text-indent:2em
• 容错处理：处理各种可能的样式格式

🎉 总结

段落首行缩进切换功能是对一键排版功能的完美补充，它：

1. 提升用户体验：简单直观的操作方式
2. 满足实际需求：符合中文排版习惯
3. 技术实现优雅：高效的算法和完善的错误处理
4. 扩展性良好：为未来功能扩展奠定基础

这个功能让用户可以根据具体需求灵活调整段落格式，真正实现了人性化的智能排版体验！