概要

Editor.jsはMediumなどでも採用のある、テキストエディタです。

ブロックスタイルという、ブロック毎にヘッダーや画像などを挿入して記事を作成していくようなスタイルのエディタです。

「編集した内容がHTML形式ではなく、JSON形式で取得できる」という点が素晴らしく、採用することにしました。

導入方法

Getting startedを見て作業しました。

インストール

% yarn add @editorjs/editorjs

# そのほかにもいくつかプラグインをインストールしておきます。
% yarn add @editorjs/header
% yarn add @editorjs/list

pluginの作成

plugins/editor.jsを作成します。

import EditorJS from '@editorjs/editorjs'
import Header from '@editorjs/header'
import List from '@editorjs/list'

export default ({ $axios }, inject) => {
  // 非同期通信が必要なeditorjsのpluginは $axios を使う必要がありますが、header/listプラグインは不要です。
  inject('editor', {
    EditorJS: ({ holder, placeholder, data }) => {
      return new EditorJS({
        holder,
        placeholder,
        data,
        tools: {
          header: {
            class: Header,
            inlineToolbar: true,
            shortcut: 'CMD+SHIFT+H',
          },
          list: {
            class: List,
            inlineToolbar: true,
            shortcut: 'CMD+SHIFT+L',
          },
        },
      })
    },
  })
}

• pluginを読み込ませます

nuxt.config.js

  plugins: [
    // 以下の行を追加します。 サーバーサイドでは読み込ませないようにする必要があります。（ssr: false）
    { src: '~/plugins/editor', ssr: false },
  ],

page側での実装

<template>
  <div>
    <div id="editorjs"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      editor: null,
      contentData: {},  // 前回保存した内容などがあれば、async dataやfetchなどで取得しておき、ここに格納しておきます。
    }
  },
  mounted() {
    this.editor = this.$editor.EditorJS({
      holder: 'editorjs',
      placeholder: '編集してください！',
      data: this.contentData,
    })
  }
}
</script>

以上です。