|
| 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