Editor.js データをLoadする

記事作成日: 2022-09-21

前回テキストエリアにoutputしたデータをjsonファイルとして保存したものをeditor.jsにロードしてみます｡

{
	"time": 1663735519011,
	"blocks": [
		{
			"id": "ZzEIudaSA5",
			"type": "paragraph",
			"data": {
				"text": "ちゃんと食えよ"
			}
		}
	],
	"version": "2.25.0"
}

まずはセーブとロードができないとですよね｡

ソースコード

const url = 'data.json';
fetch(url)
.then(function (response) {
	return response.json(); // 読み込むデータをJSONに設定
})
.then(function (json) {
	const editorjs = new EditorJS({
		holderId: 'editorjs',
		minHeight : 0,
		data :json
	});

})

結果画面

画像:　load data

ちゃんとデータがeditor.jsにロードされました｡

ロードしたデータをさらにSaveしてみたところ､timeは変更されましたが､dataのidは同じものでした｡

なお､editor.jsの生成時ではなく､[Load]ボタンを設けてクリック時にロードすることもできました｡こちらはeditorjs.renderメソッドを使っています｡

const editorjs = new EditorJS({
	holderId: 'editorjs',
	minHeight : 0
});

document.querySelector("button").onclick = ()=> {

	const url = 'data.json';
	fetch(url)
	.then(function (response) {
		return response.json(); // 読み込むデータをJSONに設定
	})
	.then(function (json) {
		editorjs.render(json)	
	})
}

参考リンク