注意

もっと簡単な導入方法を見つけました。以下を参照してください。
https://qiita.com/idani/items/661e5aaa9dc32588d204

はじめに

CKEditorで編集しているHTMLで、画像を挿入した場合に、ドラッグで画像サイズを自由に変更したい。

CKEditorのデモサイトでは、以下のように自由に画像のサイズをドラッグで変更ができる。

ところが、Vue.jsに導入したCKEditorでは、画像のサイズ変更ができなかった！！

TL;DR

Enhanced Imageプラグインを導入することで、ドラッグでの画像のリサイズに対応するようです。

デモサイトと今回作成したサンプルコードをGithubで公開をしています。
https://github.com/idani/ckeditor4-vue-image-resize

以下、Vue.jsのCKEditor4の導入の仕方からカスタマイズも含めて説明していきます。

Vue.jsにCKEditorを導入について

Vue.jsにCKEditorを導入する方法は、本家のドキュメントで、CKEditor 4 WYSIWYG Editor Vue Integrationに記載されています。

ckeditor4-vueというckeditorをVueで使うためのコンポーネントが用意されていますので、こちらの利用方法が記載されています。

それでは具体的に、Nuxt.jsでプロジェクトの作成からCKEditor4-vueの導入までを、順を追って説明します。

nuxt.jsでプロジェクトを生成すると、以下のようなファイル構成になります。

そこに、components/Ckeditor.vueを追加して、pages/index.vueを修正します。

components/Ckeditor.vue

<template>
  <ckEditor v-model="contents" :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 {
      editorConfig: {
        height: this.height
      }
    }
  },
  computed: {
    contents: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    }
  }
}
</script>

pages/index.vue

<template>
  <v-layout column justify-center align-center>
    <v-flex xs12 sm8 md6>
      <div class="text-center">
        <logo />
        <vuetify-logo />
      </div>
      <v-card>
        <v-card-title class="headline">
          CKEditor4-vue image resize example
        </v-card-title>
        <v-card-text>
          <ckeditor v-model="contents" :height="height" />
        </v-card-text>
      </v-card>
    </v-flex>
  </v-layout>
</template>

<script>
import Logo from '~/components/Logo.vue'
import VuetifyLogo from '~/components/VuetifyLogo.vue'
import Ckeditor from '~/components/Ckeditor'

export default {
  components: {
    Logo,
    VuetifyLogo,
    Ckeditor
  },
  data: () => ({
    contents: '',
    height: 500
  })
}
</script>

以下のようになります。
CKEditorの導入が簡単ですね。

CKEditorをカスタマイズする

先ほどの画面でChomeの開発者ツールで見てみますと、CKEditor.jsは、CDNから読み込まれています。
また、プラグインも同様に芋づる式にCDNから読み込まれているようです。

CKEditorをカスタマイズするには、公式ドキュメントのeditor-urlプロパティを変更して、CKEditor.jsの読み込み先を変更する必要がありました。

このeditorUrlが未指定の場合は、デフォルトでCDNから読み込まれるという仕組みです。その場合は読み込まれるプリセットは、standard-allプリセットになっています。

余談ですが、CDNのURLの構造は以下になります。プリセットの変更だけでしたら、自分でckeditor.jsを用意しなくてもよいですね。

https://cdn.ckeditor.com/

しかし、今回はプリセットで提供されないプラグインを利用するため、自分のサーバにCKEditor.jsなど一式を用意する必要があります。
それでは、まずは、CDNと同じstandard-allプリセットを自社サイトに準備をしてみましょう。

プリセットやプリセットをカスタマイズするサイトが、CKEditor4ビルダーになります。
こちらでプラグインの追加・削除やスキンを選ぶことができます。

それでは、CKEditor4ビルダーの使い方とサーバ設置を順を追って説明していきます。

プリセット選択

Standardを選択します。

プラグイン選択

スタンダードプリセットデフォルトとして、何も選ばずに次に進みます。

スキンを選択する

ここもデフォルトのモナ・リザを選択します。

言語を追加する

メニューなどで日本語で表示をしたいので、日本語カタログを追加します。

①「japanese」を選択
②追加ボタンをクリック

すると、「Japanese」が追加されます。

利用規約に同意をしてダウンロードする

最後に、利用規約の同意のチェックを入れて、ダウンロードします。

static に展開する

ダウンロードしたZIPファイル(ckeditor_4.14.1_xxxxxx.zip)を展開すると、ckeditorというフォルダがありますので、それをそのまま、Nuxtプロジェクトのstaticに展開します。

yarn devで開発をしている場合は、以下のようにhttp://localhost:3000/ckeditor/ckeditor.js でstaticに展開したファイルが見れることを確認します。

Ckeditor.vueを書き換える。

editor-urlプロパティを変更して、ckeditor.jsをローカルにダウンロードしたファイルを参照するように変更します。

components/Ckeditor.vue

<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: '/ckeditor/ckeditor.js',
      editorConfig: {
        height: this.height
      }
    }
  },
  computed: {
    contents: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    }
  }
}
</script>

<style scoped></style>