ドキュメントサイト

Table of Contents

• Table of Contents
• Overview
• Getting Started
  • Installation
  • Usage
• License

Overview

MicroCMS Rich Editor Handlerは、MicroCMSのリッチエディタコンテンツを処理し、HTMLコンテンツを変換、データを抽出するためのユーティリティです。
Cheerioを使用してHTMLコンテンツを解析し、imgタグから複数フォーマットをサポートするpictureタグに変換したり、コードブロックに対してシンタックスハイライトを適用したりします。また、HTMLコンテンツの内容から特定のデータを抽出する機能も提供しており、見出し要素から目次を生成することもできます。
これらの機能はプラグインのように付け替え可能な設計になっているため、必要に応じて選択することもでき、さらにユーザー自身が独自の処理を追加することも可能です。

Getting Started

Installation

npm install microcms-rich-editor-handler
# or
yarn add microcms-rich-editor-handler
# or
pnpm add microcms-rich-editor-handler

Usage

import {
 microCMSRichEditorHandler,
 responsiveImageTransformer,
 tocExtractor
} from 'microcms-rich-editor-handler';

const { html, data } = await microCMSRichEditorHandler(
 dataFromMicroCMS, // MicroCMSから取得したデータのリッチエディタのHTML文字列
 {
  transformers: [responsiveImageTransformer()],
  extractors: {
   toc: [tocExtractor(), { phase: "before" }],
  },
 },
);

console.log(html); // 変換後のHTML文字列
console.log(data); // 抽出したデータ
console.log(data.toc); // tocExtractorによって抽出した目次リストのデータ

License

microcms-rich-editor-handlerはMITライセンスで利用可能です。