@yxt/html-previewer

多平台内容预览器，支持公众号、小红书、朋友圈等多平台预览效果，提供移动端和电脑端双视图，轻松实现内容跨平台展示。

特性

• 🚀 支持微信公众号、小红书、朋友圈等多平台预览
• 📱 同时支持移动端和电脑端视图切换
• 🎨 支持多种主题颜色和自定义主题
• 📝 支持 Markdown 格式内容
• 🔄 动态更新内容和样式
• 🛠 高度可定制的 API

安装

npm install @yxt/html-previewer

或者使用 yarn:

yarn add @yxt/html-previewer

使用方法

基本使用

<div id="previewer"></div>

<script>
  import { YxtPreviewer } from '@yxt/html-previewer';
  
  const previewer = new YxtPreviewer({
    container: document.getElementById('previewer'),
    content: '# 这是标题\n\n这是正文内容',
    title: '示例标题',
    platform: 'wechat',  // 'wechat', 'xiaohongshu', 'moments'
    viewMode: 'mobile'   // 'mobile', 'desktop'
  });
</script>

完整配置选项

const previewer = new YxtPreviewer({
  // 必选项
  container: document.getElementById('previewer'),  // 容器元素
  
  // 内容相关
  platform: 'wechat',       // 平台类型: 'wechat', 'xiaohongshu', 'moments'
  viewMode: 'mobile',       // 视图模式: 'mobile', 'desktop'
  content: '',              // Markdown 格式内容
  title: '',                // 标题
  summary: '',              // 摘要（仅公众号）
  coverImage: '',           // 封面图片URL
  author: '',               // 作者/账号名
  authorAvatar: '',         // 作者头像URL
  authorDesc: '',           // 作者描述
  images: [],               // 图片数组（小红书轮播图/朋友圈九宫格）
  time: '',                 // 时间显示
  viewCount: 0,             // 阅读量
  likeCount: 0,             // 点赞数
  commentCount: 0,          // 评论数
  
  // 主题配置
  themeName: 'light',       // 主题: 'light', 'dark', 'blue', 'green', 'red' 等
  customTheme: null,        // 自定义主题配置
  
  // 界面控制
  showPlatformSwitch: true, // 是否显示平台切换按钮
  showViewModeSwitch: true, // 是否显示视图模式切换按钮
  showThemeSwitch: true,    // 是否显示主题切换按钮
  
  // 事件回调
  onPlatformChange: null,   // 平台切换回调
  onViewModeChange: null,   // 视图模式切换回调
  onThemeChange: null       // 主题切换回调
});

自定义主题

// 单个自定义主题
const customTheme = {
  name: '自定义主题',
  primary: '#FF7F50',
  'primary-hover': '#FF6347',
  'primary-light': '#FFF1EE',
  background: '#FFFFFF',
  text: '#333333',
  border: '#E5E7EB',
  card: '#F9FAFB',
  accent: '#FF7F50'
};

// 应用自定义主题
previewer.update({
  customTheme: { custom: customTheme },
  themeName: 'custom'
});

动态更新

// 更新内容
previewer.update({
  title: '新标题',
  content: '# 新内容\n\n这是更新后的内容'
});

// 切换平台
previewer.switchPlatform('xiaohongshu');

// 切换视图模式
previewer.switchViewMode('desktop');

// 切换主题
previewer.switchTheme('dark');

在Vue项目中使用

<template>
  <div ref="previewerContainer"></div>
</template>

<script>
import { YxtPreviewer } from '@yxt/html-previewer';

export default {
  data() {
    return {
      previewer: null
    }
  },
  mounted() {
    this.previewer = new YxtPreviewer({
      container: this.$refs.previewerContainer,
      platform: 'wechat',
      content: '# 这是在Vue中的示例\n\n这是示例内容'
    });
  },
  beforeUnmount() {
    // 清理资源
    this.previewer = null;
  }
}
</script>

各平台特点

微信公众号

• 支持标题、摘要、封面图
• 完整支持 Markdown 语法
• 底部可显示阅读量、点赞数

小红书

• 支持标题、封面图
• 自动添加情感化 emoji 表情
• 支持多图轮播
• 话题标签自动转换

朋友圈

• 简洁精炼内容
• 最多支持 9 张图片（九宫格）
• 自动裁剪长文本

兼容性

• 支持所有主流浏览器
• 依赖 marked 处理 Markdown
• 需要现代浏览器支持 ES6 特性

许可证

MIT License