Nuxt.jsにCKEditorを導入し、エディタ内の画像の移動、リサイズをドラッグで実現する

注意

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

# はじめに

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

CKEditorの[デモサイト](https://ckeditor.com/ckeditor-4/demo/)では、以下のように自由に画像のサイズをドラッグで変更ができる。

![2020-07-15_15h49_48.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/91788511-96f0-e5cf-ab31-60af2957af7b.gif)


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

![2020-07-15_16h04_48.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/1358edb5-60d5-0cb4-c5ee-4d04a4645240.gif)


# TL;DR

[Enhanced Imageプラグイン](https://ckeditor.com/cke4/addon/image2)を導入することで、ドラッグでの画像のリサイズに対応するようです。

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


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/05ac21c8-9808-bfde-aea7-dea3723bde74.png)


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

Vue.jsにCKEditorを導入する方法は、本家のドキュメントで、[CKEditor 4 WYSIWYG Editor Vue Integration](https://ckeditor.com/docs/ckeditor4/latest/guide/dev_vue.html)に記載されています。

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


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

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

そこに、<code>components/Ckeditor.vue</code>を追加して、<code>pages/index.vue</code>を修正します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/56507143-59fd-4201-f32d-b9db59853fbe.png)

```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>
```

```vue: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の導入が簡単ですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/efdbf166-d35c-c51e-5c45-b611c66ed329.png)

# CKEditorをカスタマイズする

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/d3182048-c17f-cc8d-8bbe-74a887ddb533.png)

CKEditorをカスタマイズするには、公式ドキュメントの[editor-url](https://ckeditor.com/docs/ckeditor4/latest/guide/dev_vue.html#editor-url)プロパティを変更して、<code>CKEditor.js</code>の読み込み先を変更する必要がありました。

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

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

https://cdn.ckeditor.com/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/8f7bac48-519a-0f22-9d08-1dbb93442815.png)


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

プリセットやプリセットをカスタマイズするサイトが、[CKEditor4ビルダー](https://ckeditor.com/cke4/builder)になります。
こちらでプラグインの追加・削除やスキンを選ぶことができます。


それでは、[CKEditor4ビルダー](https://ckeditor.com/cke4/builder)の使い方とサーバ設置を順を追って説明していきます。

## プリセット選択

Standardを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/244dc58d-bf99-b841-4f55-06c4c28e40cf.png)


## プラグイン選択

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/20ab2c58-6025-37ee-f808-cb13fdf61512.png)


## スキンを選択する

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/2b838e3d-cfde-4b25-2f2c-fffcacd399d8.png)

## 言語を追加する

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


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/bfda6e35-b20c-9550-dc63-30e7a0a24751.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/5e3b81e7-3a79-fdae-29a8-a16ca5ae60af.png)


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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/c635f1a4-e284-f51c-28e4-fcee88dd94dd.png)

## static に展開する

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/bee23216-ad7c-9421-12fc-39735bd7c9fb.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/6c3f6094-dc6f-27a7-0884-7a50b064b7a6.png)

## Ckeditor.vueを書き換える。

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

```vue: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>
```

以上の変更をしたら、http://localhost:3000/ をリロードします。
画面は変化はありませんが、開発ツールで確認をするとckeditor.jsからプラグインまでローカルからの読み込みに変更になっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/d5e5545c-1dff-6f5e-20a6-c031439653f7.png)

# Enhanced Image プラグインの導入

これでckeditorを自由にカスタマイズできる状態となりました。
画像をドラッグでリサイズができる<code>Enhanced Imageプラグイン</code>を追加していきましょう。

[Enhanced Imageプラグイン](https://ckeditor.com/cke4/addon/image2)の画面から、<code>Add to my editor</code>をクリックします。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/e19e2da0-cbd3-d899-6bf6-80ba0bf1b5c6.png)

<code>Add to my editor</code>ボタンが<code>Remove<code>ボタンに変化します。
その後、<code>Build my editor</code>をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/677706a8-98b2-f0bc-4f3f-cf43ebbbb7e2.png)

<code>Build my editor</code>をクリックするとビルダーページに移動します。
そうすると、自動的に<code>Enhanced Imageプラグイン</code>が追加されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/f50a8938-76ff-34b3-c548-3921a597b452.png)

先ほどと同様に、

①日本語カタログの追加
②利用規約の同意のチェック
③ダウンロード

を行います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/e74009a2-0c25-5357-22a6-ef31079d0e24.png)

ダウンロードしたZIPファイルをstatic配下に展開します。

<code>static/ckeditor/plugins/image2</code>があればOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/91b57b47-0a4f-825c-0444-1673df92d4da.png)


以上で画像をドラッグでリサイズ、移動ができるようになりました。

demoページ： https://idani.github.io/ckeditor4-vue-image-resize/
![2020-07-15_19h47_08.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/65f578ff-26f1-6371-a3b4-22277c072b09.gif)

# まとめ

CKEditorは、<code>CKEditor4-vue</code>で簡単に導入できます。
簡単すぎるがゆえに、ドキュメントを読まずに使ってしまっていて、仕組みとかわからずに使ってしまいます。

今回は、カスタマイズすることで、理解ができました。

また、、今回作成したサンプルコードは、以下で公開をしています。
https://github.com/idani/ckeditor4-vue-image-resize