こんにちは、コバヤシです。 今回はVue.jsでCKEditorを使う方法を書いていきたいと思います。
CKEditorとは
テキストエリアをWYSIWYG形式のエディタに変更するライブラリになります。
CKEditor4とCKEditor5がありますが、今回はCKEditor4を導入してみます。
ckeditor4-vueをインストール
本家に書かれている導入方法に従って、ckeditor4-vueをインストールします。
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を導入できました。
イベントなどの設定もあるようなので、そちらも試していきたいと思います。