簡単!Vue.jsでCKEditorを使う方法

こんにちは、コバヤシです。 今回はVue.jsでCKEditorを使う方法を書いていきたいと思います。

CKEditorとは

テキストエリアをWYSIWYG形式のエディタに変更するライブラリになります。

ckeditor.com

CKEditor4とCKEditor5がありますが、今回はCKEditor4を導入してみます。

ckeditor4-vueをインストール

本家に書かれている導入方法に従って、ckeditor4-vueをインストールします。

ckeditor.com

npm install ckeditor4-vue --save

Vue.jsに導入する

ckeditor4-vueを読み込んで使うようなので componentに以下のように記述します。

<template>
<div>
  <ckeditor name="content" :config="editorConfig" v-model="content"></ckeditor>
</div>
</template>
<script>
  
  const Vue = require('vue')
  const CKEditor = require('ckeditor4-vue')
  Vue.use( CKEditor );
  
  export default {
    props: {
    },
    data () {
      return {
        editorConfig: {
          language: 'ja',
          height: '380px'
        }
      }
    }
  }
</script>

後は、このコンポーネントを使用すればCKEditorが表示されます。 とても簡単ですね。

IE11に対応させる

実はそのままだとIE11では利用できません。
IE11に対応させる場合は、legacy.jsを使用する必要があります。

こんな感じになります。

  const Vue = require('vue');
  const CKEditor = require('ckeditor4-vue/dist/legacy.js')
  Vue.use( CKEditor );

Full Package版に変更する

ckeditor4-vueは、「Standard Package」のようです。
様々なプラグインが入っている「Full Package」を利用する場合は、
「editor-url」を使用して読み込むCKEditorを変更する必要があります。

<template>
<div>
  <ckeditor name="content" :editor-url="editorUrl"  :config="editorConfig" v-model="content"></ckeditor>
</div>
</template>
<script>
  
  const Vue = require('vue')
  const CKEditor = require('ckeditor4-vue/dist/legacy.js')
  Vue.use( CKEditor );
  
  export default {
    props: {
    },
    data () {
      return {
        editorUrl: "//cdn.ckeditor.com/4.15.0/full/ckeditor.js",
        editorConfig: {
          language: 'ja',
          height: '380px'
        }
      }
    }
  }
</script>

edorUrlにCDNのURLを指定することで、「Full Package」へ変更することがで出来ました。

プラグインを使用する

editorUrlを使用することで「Full Package」に変更出来ましたが、CDNを利用しているためプラグインを追加出来ません。 プラグインを追加したい場合は、CDNを利用せずにCKEditorをダウンロードして使用する必要があります。

<template>
<div>
  <ckeditor name="content" :editor-url="editorUrl"  :config="editorConfig" v-model="content"></ckeditor>
</div>
</template>
<script>
  
  const Vue = require('vue')
  const CKEditor = require('ckeditor4-vue/dist/legacy.js')
  Vue.use( CKEditor );
  
  export default {
    props: {
    },
    data () {
      return {
        editorUrl: "/js/ckeditor/ckeditor.js", // ローカルのCKEditorを指定
        editorConfig: {
          language: 'ja',
          height: '380px'
        },
        extraPlugins: 'divarea',
      }
    }
  }
</script>

使用したいプラグインをローカルはpluginsディレクトリに配置します。

まとめ

IE11で使用したい場合など注意点はありますが、簡単にvue.jsにCKEditorを導入できました。
イベントなどの設定もあるようなので、そちらも試していきたいと思います。