How to use CKEditor as an NPM module built with webpack or similar

Question

How can I use CKEditor from npm with webpack?

Ideally I want npm install ckeditor --save then var CK = require(\'ckeditor\'); without any g

Answer 1

CK Editor 5 can be easily used with webpack: https://docs.ckeditor.com/ckeditor5/latest/framework/guides/quick-start.html

Although it should be noted that as of Feb 2018 it is still in alpha2: https://github.com/ckeditor/ckeditor5#packages

I was able to get started with Rails and webpacker by using the following:

yarn add \
    css-loader  \
    node-sass \
    raw-loader \
    sass-loader \
    style-loader

yarn add \
    @ckeditor/ckeditor5-editor-classic \
    @ckeditor/ckeditor5-essentials \
    @ckeditor/ckeditor5-paragraph \
    @ckeditor/ckeditor5-basic-styles

In the code I copied directly from the quick start guide:

import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials'
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph'
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold'
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic'

const element = document.getElementById('editor')

ClassicEditor.create(element, {
  plugins: [Essentials, Paragraph, Bold, Italic],
  toolbar: ['bold', 'italic']
})
.then(editor => {
  console.log('Editor was initialized', editor)
})
.catch(error => {
  console.error(error.stack)
})

Finally I had to add a loader for ckeditor svg icons as per the quick start guide. I used the webpacker reference here for that https://github.com/rails/webpacker/blob/master/docs/webpack.md#react-svg-loader

// config/webpacker/environment.js
const { environment } = require('@rails/webpacker')

environment.loaders.insert('svg', {
  test: /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.svg$/,
  use: 'raw-loader'
}, { after: 'file' })

const fileLoader = environment.loaders.get('file')
fileLoader.exclude = /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.(svg)$/i

module.exports = environment