30日目 割烹芸人の枠組
ということで、核となる部分も見つかったので今回はそれの使い方について見ていきます。
■Editor.jsとは
公式ではNext generation block styled editorと呼んでいる。次世代のブロックスタイルエディタ。
ブロックスタイルエディタとは最近のWordpressがデフォルトにしているGutenbergやブログサービスのMediumやnote(noteのエディタはMediumEditorをベースに開発されている)でも取り入れられているWYSIWYG（What You See is What You Get:見たままが得られる）エディタ。
ブロックスタイルとは文字通りブロックごとにスタイルを定義していく。これまでのWYSIWYGエディタだと裏側のデータがごっちゃごっちゃしていたが、ブロックスタイルだと各ブロックで独立して管理できるので整頓されている。また基本データはJSONなので扱いやすい。
ブロックスタイルはWordpressがデフォルト採用したこともあり将来性としてもよさそう。いずれ主流になるのではと思ってる。
今回とりあげるeditor.jsを使うと簡単にブロックスタイルエディタを導入できる。
公式URL：https://editorjs.io/
■ライセンス
Apache License 2.0
著作権表示とライセンス条項さえやっておけば商用利用可
■使い方
Getting startededitorjs.io
3つのステップで利用できる。
1.Editor.jsをインストールする。
2. 初期化し、構成を設定
3. インストールしツールと連動させる。
-Step1.Editor.jsのインストール
3つの方法がある。
1. node.jsでnpmして使う。
npm i @editorjs/editorjs --save-dev
yarn add --dev @editorjs/editorjs
import EditorJS from '@editorjs/editorjs';
2. CDNを使う。
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
3.Editor.jsのソースコードをダウンロードして使う。
<script src="editor.js"></script>
-Step2.初期化し、構成を設定
import EditorJS from '@editorjs/editorjs';
const editor = new EditorJS({
/**
* Id of Element that should contain Editor instance
*/
holderId: 'editorjs'
});
holderId: 'editorjs'でidを指定できる。
-Step3.インストールしツールと連動させる。
editor.jsのコンセプトとしては最小限の構成で、必要なツールをインストールして使っていく。カスタマイズしていく感じ。初期はパラグラフ（p要素）ブロックだけ作られる。そこに以下のようなブロックを追加することができる。
・Header
・Link embeds
・Raw HTML blocks
・Simple Image (without backend requirement)
・Image
・Checklist
・List
・Embeds
・Quote
他のオプション
Editor.jsEditor.js Tools contributors community. Editor.js has 23 repogithub.com
使うためには：
import EditorJS from '@editorjs/editorjs';
import Header from '@editorjs/header';
import List from '@editorjs/list';
const editor = new EditorJS({
/**
* Id of Element that should contain the Editor
*/
holderId: 'editorjs',
/**
* Available Tools list.
* Pass Tool's class or Settings object for each Tool you want to use
*/
tools: {
header: Header,
list: List
},
})
こんな風にtoolsに登録する。
ツールのオプション
header: {
class: Header,
inlineToolbar: ['link']
},
class ：Tool のクラス
inlineToolbar ：インラインで使えるツールバーの指定
shortcut：ショートカットコマンドの登録
toolbox ：ツールバックスのアイコンやタイトル。
■具体的な使い方（CDNを使用した場合）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<!--<link rel="stylesheet" href="main.css">-->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
</head>
<body>
<div id="editor"></div>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/list@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/checklist@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/quote@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/code@latest"></script>
<script>const editor = new EditorJS({
holder: 'editor',
tools: {
header: Header,
list: List,
checklist: Checklist,
quote: Quote,
code: CodeTool
}
});
</script>
</body>
</html>
以下、解説
まず本体を読み込む
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
次に置き場所を作る。
<div id="editor"></div>
で、必要なブロック要素を読み込む。（なくても可）
<script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/list@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/checklist@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/quote@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/code@latest"></script>
これだと、header, list, checklist, quote, codeが読み込める。
最後にeditorjsを初期化する。
<script>const editor = new EditorJS({
holder: 'editor',
tools: {
header: Header,
list: List,
checklist: Checklist,
quote: Quote,
code: CodeTool
}
});
この時にインラインツールバーなどのオプションを追加可能。かなり簡単に組み込むことができる。
tools: {
header: {
class: Header,
inlineToolbar: ['link']
},
list: {
class: List,
inlineToolbar: true
}
}
ただ、画面が真っ白なのでどこが境界線かわかりにくいのでCSSで調整しないといけないかも。
■カスタマイズ
デフォルトのデータでエディタを初期化する。
data：{}}）;
dataプロパティにJSONデータを入れるとそれが初期値になる。
Editor.jsプラグインで既に保存済みのデータを編集する - Qiita# Editor.jsプラグインで既に保存済みのデータを編集する 本家はこちら https://editorjs.io/qiita.com
-デフォルトブロックを変更
デフォルトでは段落になってる。それを変えるためにはinitialBlockを定める。
initialBlock："myOwnParagraph" ;
-Console出力
logLevel：で出力させるログを設定
VERBOSE#すべてのメッセージを表示 （デフォルト）
INFO#情報とデバッグメッセージを表示する
WARN#警告メッセージのみを表示
ERROR#エラーメッセージのみを表示
■データの保存
データを保存したいと思ったらsave()メソッドを呼び出す。
const editor = new EditorJS();
editor.save().then((outputData) => {
console.log('Article data: ', outputData)
}).catch((error) => {
console.log('Saving failed: ', error)
});
実際はボタンがクリックされた時に出力したりするので、ボタンのクリックイベントを作ってそこで動くようにすればよさそう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<!--<link rel="stylesheet" href="main.css">-->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
</head>
<body>
<div id="editor"></div>
<button id="save">保存</button>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/list@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/checklist@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/quote@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/code@latest"></script>
<script>const editor = new EditorJS({
holder: 'editor',
tools: {
header: {
class: Header,
inlineToolbar: ['link']
},
list: List,
checklist: Checklist,
quote: Quote,
code: CodeTool
}
});
const save = document.getElementById('save');
save.addEventListener('click', () => {
editor.save().then((outputData) => {
console.log('Article data: ', outputData)
}).catch((error) => {
console.log('Saving failed: ', error)
});
});
</script>
</body>
</html>
Timestamp, ブロック, バージョンが保存。
ブロックにはそれぞれの要素のパラメータが付与されてる。
これをサーバー側でパースしてやればいい感じ。
データの規則性があって加工しやすそう。
ということで概要もなんとなく分かったので、次からカスタマイズして割烹エディターを作っていきます。
