現在エンジニアを目指して勉強中です。
ポートフォリオ作品にリッチテキストエディタを導入しようと調べた結果、
Editor.jsなるものにたどり着きました。
長くなりそうだったので、
導入~出力 / データ整形~保存 / 画面表示・再編集 / 画像プラグイン /
の4部作にして、実装をまとめていきます。（現在進行中）
自分と同じ状況の方には参考になるかと思いますので、ぜひ。
今回は導入~出力までです。
環境
・macOS Monterey 12.6
・PHP 8.1.13
・Laravel 9.3.12
・MySQL 8.0.31
・Docker 20.10.2
・Laravel Sail
Editor.jsとは
公式が掲げる主な特徴は以下の3つ
It is a block-styled editor
It returns clean data output in JSON
Designed to be extendable and pluggable with a simple API
導入フロー
インストール
方法としては3通り
- Nodeパッケージ
- CDN
- プロジェクトにファイルを配置（GitHubのソースコードはこちら）
Laravel Sailなので、今回は以下を実行
sail npm i @editorjs/editorjs
インストール完了
"dependencies":
{
"@editorjs/editorjs": "^2.26.4"
}
実装
実装もとても分かりやすかったです。
Laravelプロジェクトの/resources/js配下にeditor.jsファイルを追加。
（ファイル名等は個人的な管理しやすさを優先してます。）
import EditorJS from '@editorjs/editorjs';
// 以下のどちらかを書く。おそらく大体の人は、結局2番目の書き方になります。
const editor = new EditorJS('koko-wo-soroeru');
const editor = new EditorJS ({
holderId: 'koko-wo-soroeru',
});
<!-- Laravelプロジェクトなので実際はeditor.blade.phpファイル -->
<div id="koko-wo-soroeru"></div>
これで画面にエディターが表示されます。
ただデフォルトでは、シンプルなテキスト入力と
太字・斜体・リンクに対応しているのみ。
プラグインでの拡張が基本のようなので、追加していきます。
プラグインの導入
プラグインの導入も、基本的にEditor.js本体と同様に3通りで実装が可能。
導入できるプラグインはこちらで確認してください。
今回自分が導入したのは以下のプラグイン。
・header（見出し）
・list（リスト）
・paragraph（空行有効化）
・image（画像アップローダー）
sail npm i @editorjs/header
sail npm i @editorjs/list
sail npm i @editorjs/paragraph
sail npm i @editorjs/image
各プラグインの設定はGitHubのREADMEを。
分かりやすくまとまっています。
（画像プラグインについては別途まとめます）
const editor = new EditorJS ({
holderId: 'editor',
tools: {
header: {
class: Header,
config: {
levels: [2, 3, 4],
defaultLevel: 2
}
},
list: {
class: List,
inlineToolBar: true,
config: {
defaultStyle: 'unorderd'
}
},
paragraph: {
class: Paragraph,
inlineToolBar: true,
config: {
preserveBlank: true
}
}
}
});
入力データの出力
エディタに入力されたデータはsave()メソッドで出力できます。
あとは用途に合わせて煮るなり焼くなりというわけですね。
今回は、ボタンを押すと出力される処理をjQueryで実装しました。
editor.save()以下のコードは公式で紹介されているものの転用です。
<button id="get-editor-data" >editor.js出力！！</button>
$(function() {
// データ保存
$('#get-editor-data').on('click', function() {
editor.save()
.then((outputData) => {console.log('Article data: ', outputData)})
.catch((error) => {console.log('Saving failed: ', error)});
});
});
// outputData
// 出力されるJSONオブジェクトは以下のように3つのプロパティを含んでいる
{time: 1672207762160, blocks: Array(2), version: '2.26.4'}
// blocksのなかにテキスト情報が含まれる
blocks:[
{
id : "J4ZvhsriKq",
type:"paragraph",
data:{
text:"ああああああ"
}
},
{
id :"El6S5s-QoM",
type:"list",
data:{
style:"ordered",
items:[
"ほほおほほほおほほほほh<br>ほほほほほほほほほほほ",
"ほほおほほほほほほほほほ"
]
}
}
]
今回はここまで。
出力されたデータをどうDBへ保存するか
保存したデータをどう表示するか、再編集するか
といったことを知りたい方は、続きをどうぞ。（現在執筆中です）
参考
公式
その他