Welcome
自分の興味あるテーマを中心に、図解多めに記事を作成していきたいと思います。
Editor.js hello world
記事作成日: 2021-12-21
ソースコード
<body>
<div id="editorjs"></div>
</body>
window.addEventListener('DOMContentLoaded', (e) => {
editor = new EditorJS({
holder: 'editorjs'
});
})
解説
特に説明は必要ないと思います。
holderにエディタを配置する箇所のHtml要素のidを指定するだけです。
これだけでもうWYSIWYG Htmlブロックエディタを使用することができます｡実用的ではないですけどね。
ページにアクセスしてみると以下のようになります（真っ白）。
普通のHtmlエディタとは異なりToolbarも表示されていませんがきちんと使用できます。初期設定で含まれているのはParagraphブロックだけですがコア機能も使えます。
それでは､使用可能な機能を見ていきましょう｡
初期の機能だけでできること
- 段落(文章)の入力
- ブロックの挿入､削除
- ブロックの移動
- 太字､イタリック
- ハイパーリンクの設定
段落(文章)の入力
マウスクリック
editor領域内でマウスをクリックすると一瞬で次のような入力ボックスが表示され文章を打ち込めるようになります｡
Tabキー
マウスを使うのが面倒なら､Tabキーを押してから開始することも可能です。
次のようなメニューが表示されるので､[T]Textを選択すれば段落(p)を入力できます｡
一手間掛かりますが､このやり方だと先にpやh1などのtypeを指定できるというメリットがあります｡
入力中の画面
従来のWYSIWYGエディタと比べても遜色ない操作感です｡
ブロックの追加､削除
普通のテキストエディタやWYSIWYGエディタと同様に､Enterキーを押すと新たなブロックが追加され､BackSpaceキーでブロックを削除することができます｡
メニューから削除することもできます｡
ブロックの移動
赤枠で囲った上下の↑↓ボタンを押すだけでブロックを入れ替えることができます。
これが、私がエディタに求めている重要な機能の1つです。
たとえば､長文を部分的にコピペして入れ替えるような場合、なぞって長々とスクロールして選択する操作がすごく嫌いなのと、その際に、htmlのソースコードがバグってしまうことがよくあるので。
太字･イタリック
文字列を選択すると自動的にインラインツールバーが表示されます｡
[B]ボタンを押すと太字に､[i]ボタンを押すとイタリックに装飾できます｡
Ctrl+B,Ctrl+Iでもそれぞれ設定できます｡
ハイパーリンクの設定
赤枠のボタンを押すとハイパーリンクを設定することができます｡Ctrl + KでもOK｡
こうした､ツールバーの表示や､キーボードショートカットの使用も､自分でcontenteditable:trueでゼロから作成するより楽だと思います｡
urlを入力してEnterキーを押せばアンダーラインが表示された普通のリンクとなります｡
最後に
こちらは初期機能だけで作成した文章です｡
ほとんどコードを書いていないのにこれだけできればなかなか魅力的ではないでしょうか｡