はじめに

以前、Nuxt.jsで開発をしていてCKEditorを試行錯誤で導入しました。

そちらの経験を、Nuxt.jsにCKEditorを導入し、エディタ内の画像の移動、リサイズをドラッグで実現するとしてまとめました。

その後、少し経験値を積みまして、変わったというか、あぁ、恥ずかしいという箇所を修正します。

CKEDITR4の導入方法の変更

CKEditorにプラグインを追加するのが手間だと思っていましたが、以下のように、あっさりと実現ができました（汗）

<template>
  <ckEditor
    v-model="contents"
    :editor-url="editorUrl"
    :config="editorConfig"
  ></ckEditor>
</template>

<script>
import CKEditor from 'ckeditor4-vue'
export default {
  name: 'CKEditor4',
  components: { ckEditor: CKEditor.component },
  props: {
    value: {
      type: String,
      required: true
    },
    height: {
      type: Number,
      required: false,
      default: 500
    }
  },
  data() {
    return {
      editorUrl: 'https://cdn.ckeditor.com/4.15.1/full-all/ckeditor.js',
      editorConfig: {
        height: this.height,
        extraPlugins: ['image2'],
        removePlugins: ['image']
      }
    }
  },
  computed: {
    contents: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    }
  }
}
</script>

<style scoped></style>

editorUrlにローカルに設置したCKEditorを使用していましたが、CDN経由からのダウンロードに変更しました。

この背景には、プラグインを設定ファイルで自由に変更できることがわかったからです。
editorConfigのextraPluginsで追加のプラグインを指定でき、removePluginsで除外するプラグインを指定できました。

独自プラグインを導入する

前回の記事には書きませんでしたが、独自プラグインを導入することを視野に入れていましたので、CKEditor自体をダウンロードすることにも抵抗がありませんでした。

今回CDN経由にして、独自プラグインを呼び出す方法がわかったのでお伝えしようと思います。

CKEDITORでaddExternalメソッドを呼び出すと、独自のプラグインが読み込まれます。

ckeditor4-vueならどうするのかな？って思ったら、以下のようにするようです。

<template>
  <ckEditor
    v-model="contents"
    :editor-url="editorUrl"
    :config="editorConfig"
    @namespaceloaded="onNamespaceLoaded"
  ></ckEditor>
</template>

<script>
import CKEditor from 'ckeditor4-vue'
export default {
  name: 'CKEditor4',
  components: { ckEditor: CKEditor.component },
  props: {
    value: {
      type: String,
      required: true
    },
    height: {
      type: Number,
      required: false,
      default: 500
    }
  },
  data() {
    return {
      editorUrl: 'https://cdn.ckeditor.com/4.15.1/full-all/ckeditor.js',
      editorConfig: {
        height: this.height,
        extraPlugins: ['image2', 'timestamp'],
        removePlugins: ['image']
      }
    }
  },
  computed: {
    contents: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    }
  },
  methods: {
    onNamespaceLoaded(CKEDITOR) {
      // Add external `placeholder` plugin which will be available for each
      // editor instance on the page.

      let pluginBaseDir = '/ckeditor/plugins/timestamp/'
      if (process.env.NUXT_ENV_DEPLOY_SUBDIR) {
        pluginBaseDir =
          process.env.NUXT_ENV_DEPLOY_SUBDIR + '/ckeditor/plugins/timestamp/'
      }
      CKEDITOR.plugins.addExternal('timestamp', pluginBaseDir, 'plugin.js')
    }
  }
}
</script>

<style scoped></style>

ckeditrコンポーネントに対して、namespaceloadedというイベントを受信するようにします。
こちらは、ckeditor4-vueがCKEDitorインスタンスをロードした場合に呼ばれるそうです。

それをVueのMethodsで定義した、onNamespaceLoadedメソッドで処理をして、外部のプラグインを読み込みます。

onNamespaceLoadedメソッドは、ckeditor4-vueで1.2で実装されているので、動かなかった場合は、バージョンを確認してください。

プラグインは、プラグインのチュートリアルで記載された、現在時刻の挿入プラグインとなります。

デモサイト