microCMS RichEditor Handler

microCMSのリッチエディタコンテンツを変換したりデータを抽出します。

ドキュメントサイト

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

$3

``sh
npm install microcms-rich-editor-handler


or

yarn add microcms-rich-editor-handler

or

pnpm add microcms-rich-editor-handler
`

$3

`js
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ライセンスで利用可能です。