Editor.jsを使用する中で目次を自動生成する必要があったので、その方法を備忘録としてまとめます。
必要なライブラリのインストール
editorjs-htmlとcheerioのインストール
- editorjs-html：Editor.jsの出力データをHTML形式に変換するライブラリ
- cheerio：HTML構文を解析するライブラリ
以下のコマンドでインストールします。
npm install editorjs-html cheerio
Editor.jsのデータをHTMLに変換
まず、Editor.jsの出力データをHTML形式に変換します。
import edjsHTML from "editorjs-html";
import * as cheerio from "cheerio";
/**
* Editor.jsの出力データを代入した変数
*/
const editorData = {
"time" : 1550476186479,
"blocks" : [
{
"id": "32D3C7CD",
"type" : "paragraph",
"data" : {
"text" : "段落"
}
},
{
"id": "9CDF4837",
"type" : "header",
"data" : {
"text" : "見出し1",
"level" : 1
}
},
{
"id": "5DADBAA3",
"type" : "paragraph",
"data" : {
"text" : "段落1"
}
},
{
"id": "F59F28AD",
"type" : "header",
"data" : {
"text" : "見出し2",
"level" : 1
}
},
{
"id": "8B2BC734",
"type" : "paragraph",
"data" : {
"text" : "段落2"
}
}
],
"version" : "2.8.1"
};
const edjsParser = edjsHTML();
/**
* HTML形式に変換
* 配列形式で代入されます
*/
let html = edjsParser.parse(editorData);
htmlから目次を作成
次に、変換したHTMLから目次を作成します。
/**
* cheerioライブラリにhtmlを読み込ませる
*/
const $ = cheerio.load(html.join(''));
/**
* 読み込ませたhtmlからh1タグを抜き出す
*/
// const headings = $('h1, h2, h3').toArray(); // h2タグとh3タグまで抜き出したい場合
const headings = $('h1').toArray();
/**
* 目次データを作成
*/
const tocs = headings.map(data => ({
id: data.attribs.id,
text: data.children[0].data,
}));
このコードにより、以下のような目次データが生成されます。
[
{ id: "5DADBAA3", text: "見出し1"},
{ id: "8B2BC734", text: "見出し2"}
]
目次をプレビュー
最後に、目次データを元にHTMLを作成します。以下はVue.jsを使用した例です。
<ul class="tocs">
<li v-for="toc in tocs" :key="toc.id" class="toc">
<!-- ページ内リンクでaタグを設定 -->
<a :href="`#${toc.id}`">
{{ toc.text }}
</a>
</li>
</ul>
まとめ
目次データを配列で作成するだけでなく、createElementを使用してDOMを作成し、appendChildで特定のDOMに代入することも可能です。用途に応じてカスタマイズしてください。
参考
以上がEditor.jsとcheerioを使用した目次の自動生成方法です。ぜひ参考にしてください。
Discussion