シンプルで今後使ってみたいWYSIWYGエディター Editor.js
本文書で今回紹介するのはNote, Medium, WordPressのGutenbergのようなブロックスタイルのWYSIWYGエディターのEditor.jsです。シンプルで使いやすそうだったのでどのように設定を行うのか確認しました。
動作確認はMacで行っていますがcdnで利用することができるため動作確認は簡単に行うことができます。
目次
Ediror.jsとは
Editor.jsのページにはNext generation block styled editorと記述されている通りブロックスタイルのエディターです。
Editor.jsは主に下記の3つの特徴的な機能を持っています。
一つ目の特徴はブロックスタイルエディターということでヘッダー、パラグラフ単位にブロックが割り振られ、ブロック毎に編集を行い、ブロッグ毎に位置の入れ替えを行うことができます。Note, Medium, WordPressのGutenbergでも利用されている方法なのでブロックスタイルエディターということを意識せず利用している人も多いかと思います。
二つ目の特徴はブロックに記述した内容をJSONオブジェクトして取り出すことができます。JSONオブジェクトとして取り出せるので他のアプリケーションにも簡単に渡すことできます。JSONの構造さえわかればJSONオブジェクトの中身をHTMLページとして表示させることが可能です。
三つ目の特徴はパラグラフやヘッダーなどの既存で準備されているブロックだけではなく独自のブロックを作成しプラグインとして追加することができます。プラグインとして簡単に追加できるような仕組みになっているのでカスタマイズを行うことが可能です。
cdnを使って動かしてみよう
Editor.jsの動作確認はcdnを利用して行うことができます。cdnのURLは下記の通りです。
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
Editor.jsを利用するためには要素にidを設定してEditor.jsでholderでそのidの値を指定します。ここではdiv要素にidのeditorjsを設定しています。後ほど利用するボタンも追加しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Editor.js</title>
</head>
<body>
<h1>Editor.jsを理解する</h1>
<div id="editorjs"></div>
<button>記事を保存する</button>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
<script>
const editorJS = new EditorJS({
holder: "editorjs",
});
</script>
</body>
</html>
ブラウザで確認するとh1タグで設定した文字列とボタン以外は何も表示されていません。
ブラウザをクリックするとブラウザ上にプラス(+)と四角の中に4つの四角が入ったアイコンが表示されることがわかります。これがブロックでその中に文字を入力することができます。
文字を入力してみよう
プラスのアイコンの右側から文字を入力することが可能です。右側の四角をクリックすると上下のアイコンとX(バツ)のアイコンが表示されます。バツをクリックするとそのブロックが削除されます。上下のアイコンは複数のブロックがある場合にブロッグを上下方向に移動させることができます。
Enterをクリックすると新たにブロックが作成されます。下記では4つのパラグラフつまり4つのブロックで構成されています。このようにブロック単位でプラグラフを追加していくことができます。ブロックはその場所に固定されているわけではなくブロック単位で移動することができます。
入力した内容を取り出そう
ブラウザ上に文章が入力できることはわかりました。次は入力した文章を一括で取得する方法を確認していきます。
ボタンをクリックすると入力した内容が表示できるようにボタンにクリックイベントを設定します。入力したデータを取得するためにはsaveメソッドを利用します。
const btn = document.querySelector("button");
btn.addEventListener("click", function () {
editorJS
.save()
.then((outputData) => {
console.log("input Data ", outputData);
})
.catch((error) => {
console.log("failed: ", error);
});
});
ブロックに文章を入力後ブラウザ上にある”記事を保存する”ボタンをクリックするとデベロッパーツールのコンソールに入力した内容が表示されます。
time, blocks, versionを確認することができます。blocksの中の配列を展開すると配列の中に入力した文字列がtextとして保存されていることがわかります。デフォルトの状態では入力した内容とtypeのみがblocksの配列の中に保存されます。
入力した内容がsaveメソッドで取得でき、どのような形式で取得できるのか確認することができました。入力した内容の保存方法がわかりましたが、保存した内容を再度表示したい場合の方法が今のところわかりません。次はその方法を確認します。
保存した内容を表示させたい場合は？
ページを開いた時にこれまで入力した内容を表示させたい場合はdataプロパティを利用します。
本文書ではデータを保存する仕組みがないので、入力して取り出したデータを下記のようにdataプロパティに入れることで再度Editor.js上に表示させ、編集することが可能になります。
const editorJS = new EditorJS({
holder: "editorjs",
// minHeight: 20,
data: {
time: 1600854128568,
blocks: [
{
type: "paragraph",
data: {
text: "ここに文字を入力することができます.",
},
},
{
type: "paragraph",
data: {
text: "Enterを押すと新しいブロックが作成されます。",
},
},
{
type: "paragraph",
data: {
text: "Enterを押すと新しいブロックが作成されます。",
},
},
],
version: "2.8.1",
},
});
下記のように取り出したJSONの内容を使うことで再度その内容を表示させることができます。
ヘッダータグを設定したい場合は
ここまで入力した内容はすべてパラグラフでしたヘッダータグを利用したい場合はどのように行うのか確認します。
Editor.jsのデフォルトの状態ではブロックにはパラグラフのみ利用することができます。ヘッダータグなど他のものを利用したい場合はプラグインで追加を行う必要があります。通常ではimportを利用しますがここではcdnを利用して追加を行います。
ヘッダーブロックのプラグインのcdnを下記となります。
<script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script>
追加したプラグインの設定は下記のように行います。levelsを設定することでヘッダータグのレベルを選択することができます。デフォルトのレベルも設定することできlevel3に設定しています。
const editorJS = new EditorJS({
holder: "editorjs",
tools: {
header: {
class: Header,
config: {
levels: [2, 3, 4],
defaultLevel: 3,
},
},
},
設定後プラスのアイコンをクリックするとTとHが表示されます。Hを選択するとヘッダータグとなり文字を入力するとデフォルトのh3として入力することができます。
h3タグなのでパラグラフと比較して文字が大きく太く表示されます。
右側の四角をクリックするとhタグを変更することも可能です。
saveメソッドで入力した内容を確認すると入力した内容の中にはh2,h3などのタグが含まれることはなく、levelプロパティが一緒に保存され、Typeはheaderになっていることが確認できます。
Listタグの追加
ListタグもHeaderタグと同様にプラグインを追加する必要があります。
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/list@latest"></script>
<script>
const editorJS = new EditorJS({
holder: "editorjs",
tools: {
header: {
class: Header,
config: {
levels: [2, 3, 4],
defaultLevel: 3,
},
},
list: {
class: List,
},
},
});
追加後プラスのアイコンをクリックするとリストのアイコンが追加されてリストで入力することがわかります。
また右側の四角のアイコンをクリックすると番号ありとなしのリストを選択することができます。
入力した内容を確認するとtextプロパティからitemsプロパティに変わり、styleプロパティが追加されordered、typeはListと表示されます。
configの設定
paddingの設定
デフォルトでは入力する領域とボタンまでの間にpadding:300pxが設定されているので入力する情報が少ない場合は離れすぎていると感じることがあります。
minHeightを設定することでpaddingの大きさを変更することができます。
const editorJS = new EditorJS({
holder: "editorjs",
minHeight: 50,
minHeightを設定するとpaddingの大きさが小さくなったことを確認することができます。
placeholderを設定
なにも入力を行っていない場合に画面には何も表示されないのでplaceholderの設定を行うことでユーザが何を入れるか判断する材料になります。しかしデフォルトでは最初のブロックはパラグラフなのでdataを使って空のヘッダーブロックを入れます。placeholderはconfigの中で設定を行います。
const editorJS = new EditorJS({
holder: "editorjs",
minHeight: 50,
tools: {
header: {
class: Header,
config: {
placeholder: "見出しを入力してください",
levels: [2, 3, 4],
defaultLevel: 2,
},
},
list: {
class: List,
},
},
data: {
blocks: [
{
type: "header",
data: {
text: "",
level: 2,
},
},
],
},
});
画像用のプラグインや自作のプラグインを追加することも可能なのでさらに動作確認が必要ですがEditor.jsがどのようなものかはしっかり理解することできました。
