Trong quá trình phát triển ứng dụng trên HarmonyOS Next, việc hiển thị nội dung HTML giàu định dạng là một yêu cầu thường gặp. Thay vì sử dụng trực tiếp thư viện bên thứ ba tại mọi nơi trong dự án, phương án tối ưu là xây dựng một component bao bọc (wrapper). Cách tiếp cận này giúp tách biệt logic xử lý nội dung khỏi công cụ render, tạo điều kiện thuận lợi để mở rộng tính năng hoặc thay thế thư viện nền tảng trong tương lai mà không ảnh hưởng đến toàn bộ hệ thống.

Bài viết này sẽ hướng dẫn cách tích hợp thư viện hp-richtext vào một component自定义 tên là SmartRichTextDisplay. Component này không chỉ đảm nhiệm việc hiển thị văn bản mà còn cung cấp cơ chế tùy chỉnh kích thước hình ảnh nhúng trong chuỗi HTML thông qua các tham số đầu vào.

Triển khai Component Wrapper

Component dưới đây nhận các thuộc tính về kích thước font, màu sắc và nội dung HTML. Điểm đáng chú ý là logic xử lý chuỗi HTML để chèn thêm style cho thẻ img dựa trên chế độ hiển thị được chọn.

import { HPRichText, RichTextOption } from '@ohasasugar/hp-richtext';
import { Logger } from '../../utils/Logger';

type ImageFitMode = 'scaleHeight' | 'scaleWidth' | 'maxConstraint';

@Component
export struct SmartRichTextDisplay {
  @Prop @Watch('syncOptions') textSize: number = 14;
  @Prop @Watch('syncOptions') textColor: string = '#333333';
  @Prop @Watch('syncOptions') htmlSource: string = '';
  @Consume @Watch('syncOptions') globalScale: number = 1.0;

  @State renderConfig: RichTextOption = {
    content: '',
    baseFontSize: 0,
    baseFontColor: ''
  };

  @State displayMode: ImageFitMode = 'scaleWidth';

  syncOptions() {
    this.renderConfig = {
      content: this.processHtmlContent(this.htmlSource),
      baseFontSize: this.textSize * this.globalScale,
      baseFontColor: this.textColor,
    };
  }

  aboutToAppear() {
    this.syncOptions();
  }

  private processHtmlContent(rawHtml: string): string {
    let processedHtml = rawHtml;
    const imgTag = '<img';

    if (this.displayMode === 'scaleWidth') {
      processedHtml = processedHtml.replace(
        new RegExp(imgTag, 'g'),
        '<img style="width: 100%; height: auto;"'
      );
    } else if (this.displayMode === 'scaleHeight') {
      processedHtml = processedHtml.replace(
        new RegExp(imgTag, 'g'),
        '<img style="width: auto; height: 80vp;"'
      );
    } else if (this.displayMode === 'maxConstraint') {
      // Lưu ý: hp-richtext có thể không hỗ trợ trực tiếp max-width qua style
      // Cần kiểm tra tài liệu cụ thể của thư viện để dùng constraintSize nếu cần
      processedHtml = processedHtml.replace(
        new RegExp(imgTag, 'g'),
        '<img style="max-width: 100%;"'
      );
    }

    Logger.info('RichTextProcessor', `Processed HTML length: ${processedHtml.length}`);
    return processedHtml;
  }

  build() {
    if (this.renderConfig.content) {
      HPRichText({
        richTextOption: this.renderConfig,
      })
    }
  }
}

Cách sử dụng Component

Để sử dụng component đã封装, bạn chỉ cần gọi nó trong giao diện và truyền vào nội dung HTML cùng các cấu hình hiển thị mong muốn. Dưới đây là ví dụ minh họa cách khởi tạo component với một đoạn nội dung đơn giản.

SmartRichTextDisplay({
  htmlSource: `<p>Hello World</p><p>Đây là nội dung demo.</p>`,
  textSize: 16,
  textColor: '#000000',
  displayMode: 'scaleWidth' // Hoặc 'scaleHeight', 'maxConstraint'
})