Skip to content
A repo that show how to configure Webpack Encore to build CKEditor 5 from source, and use it in Vue
JavaScript Vue HTML
Branch: master
Clone or download
Latest commit 589ca0f Aug 13, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.gitignore Setup Webpack Encore Aug 12, 2019
README.md deps Aug 13, 2019
index.html Setup Webpack Encore Aug 12, 2019
package.json Make CKEditor5 works :D Aug 12, 2019
webpack.config.js Make CKEditor5 works :D Aug 12, 2019
yarn.lock Make CKEditor5 works :D Aug 12, 2019

README.md

Webpack Encore: CKEditor 5 from source + Vue

This repo shows how to build CKEditor 5 from source, with Webpack Encore and Vue support.

How make it works

Install dependencies:

# Dev dependencies
$ yarn add --dev @ckeditor/ckeditor5-dev-utils \
@ckeditor/ckeditor5-dev-webpack-plugin \
raw-loader

# Dependencies
$ yarn add @ckeditor/ckeditor5-vue \
@ckeditor/ckeditor5-basic-styles \
@ckeditor/ckeditor5-editor-classic \
@ckeditor/ckeditor5-essentials \
@ckeditor/ckeditor5-link \
@ckeditor/ckeditor5-paragraph \
@ckeditor/ckeditor5-theme-lark

In your webpack.config.js:

// Imports ...

// Configuration ...
Encore
  // Your configuration ...
  
  // Configure PostCSS
  .addLoader({
    test: /ckeditor5-[^/\\]+[/\\].+\.css$/,
    loader: 'postcss-loader',
    options: styles.getPostCssConfig({
      themeImporter: {
        themePath: require.resolve('@ckeditor/ckeditor5-theme-lark'),
      },
    }),
  })
  
  // See https://www.npmjs.com/package/@ckeditor/ckeditor5-dev-webpack-plugin
  .addPlugin(new CKEditorWebpackPlugin({
    language: 'fr',
  }))
  
  // Use raw-loader for CKEditor5 SVG files
  .addRule({
    test: /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.svg$/,
    loader: 'raw-loader'
  })
  
  // Configure other image loaders to exclude CKEditor5 SVG files, otherwise we will have some issue 
  .configureLoaderRule('images', loader => {
    loader.exclude = /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.svg$/;
  })

In a Vue component:

<template>
  <ckeditor v-model="editorData" :editor="editor" :config="editorConfig"></ckeditor>
</template>

<script>
import CKEditor from '@ckeditor/ckeditor5-vue';
// ⚠️ NOTE: We don't use @ckeditor/ckeditor5-build-classic any more!
// Since we're building CKEditor from source, we use the source version of ClassicEditor.
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials';
import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold';
import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic';
import LinkPlugin from '@ckeditor/ckeditor5-link/src/link';
import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph';

export default {
  name: "CKEditor",
  components: {
    ckeditor: CKEditor.component,
  },
  data() {
    return {
      editor: ClassicEditor,
      editorData: '<p>Content</p>',
      editorConfig: {
        plugins: [
          EssentialsPlugin,
          BoldPlugin,
          ItalicPlugin,
          LinkPlugin,
          ParagraphPlugin,
        ],

        toolbar: {
          items: [
            'bold',
            'italic',
            'link',
            'undo',
            'redo',
          ],
        },
      },
    };
  },
};
</script>

If everything goes well, you should see something like this:

image

Try it

  • Clone this repo
  • Install dependencies: yarn
  • Run Webpack's dev-server: yarn dev-server
  • Open http://localhost:8080
You can’t perform that action at this time.