karamay_wx/utils/htmlProcessor.js

/**
 * HTML内容处理工具
 * 用于处理富文本内容中的格式问题
 */

/**
 * 处理HTML内容
 * @param {string} htmlContent - 原始HTML内容
 * @returns {string} 处理后的HTML内容
 */
export function processHtmlContent(htmlContent) {
  if (!htmlContent) return ''

  let processedContent = htmlContent

  // 1. 处理段落中的前导空格，转换为缩进
  processedContent = processedContent.replace(/<p>\s+([^<]*)<\/p>/g, '<p class="indent">$1</p>')

  // 2. 处理段落内部的多个连续空格
  processedContent = processedContent.replace(
    /<p>([^<]*?)\s{2,}([^<]*?)<\/p>/g,
    '<p><span class="indent-text">$1</span>$2</p>',
  )

  // 3. 处理图片容器，添加统一的样式类
  processedContent = processedContent.replace(
    /<div class="media-wrap image-wrap"><img src="([^"]*)"/g,
    '<div class="media-wrap image-wrap processed-image"><img style="height: 80px;" src="$1" class="content-image"',
  )

  // 4. 处理音频容器（如果有的话）
  processedContent = processedContent.replace(
    /<div class="media-wrap audio-wrap">/g,
    '<div class="media-wrap audio-wrap processed-audio">',
  )

  // 5. 处理视频容器（如果有的话）
  processedContent = processedContent.replace(
    /<div class="media-wrap video-wrap">/g,
    '<div class="media-wrap video-wrap processed-video">',
  )

  // 6. 移除空的段落标签
  processedContent = processedContent.replace(/<p><\/p>/g, '')

  // 7. 处理图片的alt属性
  processedContent = processedContent.replace(
    /<img([^>]*?)src="([^"]*?)"([^>]*?)\/?>/g,
    '<img$1src="$2" alt="内容图片" loading="lazy"$3/>',
  )

  return processedContent
}

/**
 * 获取处理HTML内容的CSS样式
 * @returns {string} CSS样式字符串
 */
export function getHtmlContentStyles() {
  return `
    /* 缩进段落样式 */
    .indent {
      text-indent: 2em;
      margin-bottom: 1em;
      line-height: 1.6;
    }
    
    /* 缩进文本样式 */
    .indent-text {
      margin-left: 2em;
    }
    
    /* 处理后的图片容器样式 */
    .processed-image {
      margin: 20px 0;
      text-align: center;
      background: #f8f9fa;
      border-radius: 8px;
      padding: 15px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    /* 内容图片样式 */
    .content-image {
      max-width: 100%;
      height: auto;
      border-radius: 6px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
      transition: transform 0.3s ease;
    }
    
    .content-image:hover {
      transform: scale(1.02);
    }
    
    /* 处理后的音频容器样式 */
    .processed-audio {
      margin: 15px 0;
      padding: 15px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 10px;
      text-align: center;
    }
    
    /* 处理后的视频容器样式 */
    .processed-video {
      margin: 20px 0;
      padding: 10px;
      background: #000;
      border-radius: 8px;
      text-align: center;
    }
    
    /* 通用媒体容器样式 */
    .media-wrap {
      position: relative;
      overflow: hidden;
    }
    
    /* 响应式处理 */
    @media (max-width: 768px) {
      .processed-image {
        margin: 15px 0;
        padding: 10px;
      }
      
      .indent {
        text-indent: 1.5em;
      }
      
      .indent-text {
        margin-left: 1.5em;
      }
    }
  `
}