vue + ckeditor5 を使ってみる - わたしの日記だよ

vue で ckeditor 5 を使ってみたところ、4系とだいぶ使用方法が変わっていたのでメモ👀。

前提

vue 2.6.X
webpack 4.32.X
ckeditor 5系

build 版（@ckeditor/ckeditor5-editor-classic）を使う

カスタマイズせず、そのまま使うので良いなら、↓するだけ

yarn add @ckeditor/ckeditor5-build-classic @ckeditor/ckeditor5-vue

toolbar などカスタマイズしたい場合は、以下の手順が必要になります。

ckeditor5-editor-classic のリポジトリを clone してくる
追加したいプラグインをインストール
ClassicEditor.builtinPlugins に 2. のプラグインを追加
build する

詳細は ↓↓↓

https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html#adding-a-plugin-to-a-build

当初、こっちを使用する予定でしたが clone するのはちょっとイヤだったので、もう一方を使うことにしました。

source 版（@ckeditor/ckeditor5-editor-classic）を使う

Rich text editor component for Vue.js ↓↓↓ https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html

公式の Vue.js 版のドキュメントは、vue-cli 前提なのですが今回のプロジェクトでは vue-cli は使っていないため、Advanced setup のページを見ながら進めます。 https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/advanced-setup.html#scenario-2-building-from-source

１. build版の package.json の devDependencies から、ckeditor 関連の package 部分を、自分の package.json にコピーしてくる。（2019/10/20時点の Tag: v12.3.1 だと↓こんなかんじ）

  "dependencies": {
    "@ckeditor/ckeditor5-adapter-ckfinder": "^11.0.4",
    "@ckeditor/ckeditor5-autoformat": "^11.0.4",
    "@ckeditor/ckeditor5-basic-styles": "^11.1.3",
    "@ckeditor/ckeditor5-block-quote": "^11.1.2",
    "@ckeditor/ckeditor5-ckfinder": "^11.0.4",
    "@ckeditor/ckeditor5-core": "^12.2.1",
    "@ckeditor/ckeditor5-dev-utils": "^12.0.0",
    "@ckeditor/ckeditor5-dev-webpack-plugin": "^8.0.0",
    "@ckeditor/ckeditor5-easy-image": "^11.0.4",
    "@ckeditor/ckeditor5-editor-classic": "^12.1.3",
    "@ckeditor/ckeditor5-essentials": "^11.0.4",
    "@ckeditor/ckeditor5-heading": "^11.0.4",
    "@ckeditor/ckeditor5-image": "^13.1.2",
    "@ckeditor/ckeditor5-link": "^11.1.1",
    "@ckeditor/ckeditor5-list": "^12.0.4",
    "@ckeditor/ckeditor5-media-embed": "^11.1.3",
    "@ckeditor/ckeditor5-paragraph": "^11.0.4",
    "@ckeditor/ckeditor5-paste-from-office": "^11.0.4",
    "@ckeditor/ckeditor5-table": "^13.0.2",
    "@ckeditor/ckeditor5-theme-lark": "^14.1.1",
    // ...
}

２. source 版本体と、build に必要な package をインストールする

yarn add @ckeditor/ckeditor5-editor-classic @ckeditor/ckeditor5-vue postcss-loader@3 raw-loader@3 style-loader@1 webpack@4 webpack-cli@3

３. webpack の設定追加

const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );

module.exports = {
    plugins: [
        // ...

        new CKEditorWebpackPlugin( {
            language: 'ja'
        } )
    ],

    module: {
        rules: [
            {
                test: /ckeditor5-[^/]+\/theme\/icons\/.+\.svg$/,
                use: [ 'raw-loader' ]
            },
            {

                test: /ckeditor5-[^/]+\/theme\/[\w-/]+\.css$/,
                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            injectType: 'singletonStyleTag'
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: styles.getPostCssConfig( {
                            themeImporter: {
                                themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                            },
                            minify: true
                        } )
                    },
                ]
            }
        ]
    }
};

４. vue 作成これも、build 版のコードを参考に。

ckeditor5-build-classic/ckeditor.js at v12.4.0 · ckeditor/ckeditor5-build-classic · GitHub

以上なのですが、私の環境だと色々エラーが出たので別ページでまとめたいと思います👀