flex-html-render

flex-html-render 是一個將 HTML 字串轉換為 LINE Flex Message JSON 結構的工具，方便開發者以 HTML 標記語法設計 Flex Message，並自動轉換為 LINE Messaging API 所需的格式。

Demo 頁面

- Flex Message HTML Simulator

特色

- 以 HTML 字串描述 Flex Message 結構
- 自動解析 HTML 並轉換為 Flex Message JSON
- 支援多種 Flex Message 元素
- 易於整合於 Node.js 或前端專案

安裝

``bash
npm install flex-html-render
`

使用方式

`js
import convertHtmlToFlexMessage from 'flex-html-render';

const htmlString =



這是一個 Flex Message



;

const flexMessage = convertHtmlToFlexMessage(htmlString);
console.log(JSON.stringify(flexMessage, null, 2));

// 將產生的 JSON 放入 LINE Messaging API 的訊息結構中
const message = {
type: 'flex',
altText: 'Flex Message',
contents: flexMessage[0] // 因為 convertHtmlToFlexMessage 回傳陣列，取第一個元素
};
`

注意：此套件產生的 JSON 物件應放置在 LINE Messaging API 中 type 為 flex 的訊息物件的 contents 區塊內。詳細請參考 LINE Flex Message 官方文件。

API

$3

- 參數：htmlString (string) - Flex Message 對應的 HTML 字串
- 回傳：Flex Message JSON 物件陣列
- 說明：此函數將 Flex Message HTML 字串轉為 JSON 結構，可用於編輯或顯示目的

$3

- 參數：json (object) - Flex Message JSON 物件
- 回傳：對應的格式化 HTML 字串
- 說明：此函數將 Flex Message JSON 結構轉為 HTML 字串，可用於編輯或顯示目的

支援的 Flex Message 元素

本工具支援大部分 LINE Flex Message 元素，包括：
- bubble
- carousel
- box
- text
- image
- video
- button
- icon
- separator

詳細 Flex Message 元素與屬性請參考 LINE 官方文件。

標籤類型說明 (types.js)

$3

- - Flex Message 的基本容器，只能包含 top-level 區塊標籤
- - 輪播容器，只能包含 標籤，最多 12 個

$3

這些標籤只能直接放在 內，且每個只能有一個子元素：
-

- 標題區塊
- - 英雄圖區塊
- - 主體內容區塊
-