Skip to content

Commit 021758d

Browse files
committed
README.mdを作成し、microCMS RichEditor Handlerの概要、インストール手順、使用例を追加
1 parent e666199 commit 021758d

File tree

1 file changed

+66
-0
lines changed

1 file changed

+66
-0
lines changed

README.md

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
2+
<p align="center"><h1 align="center">microCMS RichEditor Handler</h1></p>
3+
<p align="center">
4+
<em>microCMSのリッチエディタコンテンツを変換したりデータを抽出します。</em>
5+
</p>
6+
<p align="center">
7+
<img src="https://img.shields.io/github/license/dc7290/microcms-rich-editor-handler?style=default&logo=opensourceinitiative&logoColor=white&color=0080ff" alt="license">
8+
<img src="https://img.shields.io/github/last-commit/dc7290/microcms-rich-editor-handler?style=default&logo=git&logoColor=white&color=0080ff" alt="last-commit">
9+
<img src="https://img.shields.io/github/languages/top/dc7290/microcms-rich-editor-handler?style=default&color=0080ff" alt="repo-top-language">
10+
<img src="https://img.shields.io/github/languages/count/dc7290/microcms-rich-editor-handler?style=default&color=0080ff" alt="repo-language-count">
11+
</p>
12+
13+
## Table of Contents
14+
15+
- [Table of Contents](#table-of-contents)
16+
- [Overview](#overview)
17+
- [Getting Started](#getting-started)
18+
- [Installation](#installation)
19+
- [Usage](#usage)
20+
- [License](#license)
21+
22+
## Overview
23+
24+
**MicroCMS Rich Editor Handler**は、MicroCMSのリッチエディタコンテンツを処理し、HTMLコンテンツを抽出、変換、データを取得するためのユーティリティです。
25+
Cheerioを使用してHTMLコンテンツを解析し、imgタグから複数フォーマットをサポートするpictureタグに変換したり、コードブロックに対してシンタックスハイライトを適用したりします。また、HTMLコンテンツの内容から特定のデータを抽出する機能も提供しており、見出し要素から目次を生成することもできます。
26+
これらの機能はプラグインのように付け替え可能な設計になっているため、必要に応じて選択することもでき、さらにユーザー自身が独自の処理を追加することも可能です。
27+
28+
## Getting Started
29+
30+
### Installation
31+
32+
```sh
33+
npm install microcms-rich-editor-handler
34+
# or
35+
yarn add microcms-rich-editor-handler
36+
# or
37+
pnpm add microcms-rich-editor-handler
38+
```
39+
40+
### Usage
41+
42+
```js
43+
import {
44+
microCMSRichEditorHandler,
45+
responsiveImageTransformer,
46+
tocExtractor
47+
} from 'microcms-rich-editor-handler';
48+
49+
const { html, data } = await microCMSRichEditorHandler(
50+
dataFromMicroCMS, // MicroCMSから取得したデータのリッチエディタのHTML文字列
51+
{
52+
transformers: [responsiveImageTransformer()],
53+
extractors: {
54+
toc: [tocExtractor(), { phase: "before" }],
55+
},
56+
},
57+
);
58+
59+
console.log(html); // 変換後のHTML文字列
60+
console.log(data); // 抽出したデータ
61+
console.log(data.toc); // tocExtractorによって抽出した目次リストのデータ
62+
```
63+
64+
## License
65+
66+
microcms-rich-editor-handlerはMITライセンスで利用可能です。

0 commit comments

Comments
 (0)