https://github.com/microcmsio/microcms-rich-editor-handler
https://github.com/microcmsio/microcms-rich-editor-handler
Last synced: 11 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/microcmsio/microcms-rich-editor-handler
- Owner: microcmsio
- License: mit
- Created: 2024-12-13T14:28:09.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-23T04:59:06.000Z (over 1 year ago)
- Last Synced: 2025-06-22T05:29:35.436Z (11 months ago)
- Language: TypeScript
- Homepage: https://microcms-rich-editor-handler.vercel.app
- Size: 184 KB
- Stars: 5
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
microCMS RichEditor Handler
microCMSのリッチエディタコンテンツを変換したりデータを抽出します。
[ドキュメントサイト](https://microcms-rich-editor-handler.vercel.app)
## Table of Contents
- [Table of Contents](#table-of-contents)
- [Overview](#overview)
- [Getting Started](#getting-started)
- [Installation](#installation)
- [Usage](#usage)
- [License](#license)
## Overview
**microCMS Rich Editor Handler**は、microCMSのリッチエディタコンテンツを処理し、HTMLコンテンツを変換、データを抽出するためのユーティリティです。
Cheerioを使用してHTMLコンテンツを解析し、imgタグから複数フォーマットをサポートするpictureタグに変換したり、コードブロックに対してシンタックスハイライトを適用したりします。また、HTMLコンテンツの内容から特定のデータを抽出する機能も提供しており、見出し要素から目次を生成することもできます。
これらの機能はプラグインのように付け替え可能な設計になっているため、必要に応じて選択することもでき、さらにユーザー自身が独自の処理を追加することも可能です。
## Getting Started
### Installation
```sh
npm install microcms-rich-editor-handler
# or
yarn add microcms-rich-editor-handler
# or
pnpm add microcms-rich-editor-handler
```
### Usage
```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ライセンスで利用可能です。