CKEditor 5 Text Editor

CKEditor is a browser-based rich text editor with a powerful framework behind it. There are also a lot of plugins which make it very modular and easy to adapt to a projects needs....

a year ago

Latest Post Automatic Offline Backup With a Raspberry Pi by Tyler Moon

CKEditor is a browser-based rich text editor with a powerful framework behind it. There are also a lot of plugins which make it very modular and easy to adapt to a projects needs. In this example we are going to go through how to get the basic setup working fo CKEditor using NPM, webpack, and Nodejs.

Prerequisites

Setup

First things first we need to setup our package.json file, install the needed Node packages, and create the project files

npm init // create a new package.json file

And fill in the following details

{
  "name": "ckeditor-example",
  "version": "1.0.0",
  "scripts": {
    "build": "webpack --mode development"
  },
  "dependencies": {
    "@ckeditor/ckeditor5-basic-styles": "^10.1.0",
    "@ckeditor/ckeditor5-dev-utils": "^11.0.1",
    "@ckeditor/ckeditor5-editor-classic": "^11.0.2",
    "@ckeditor/ckeditor5-essentials": "^10.1.3",
    "@ckeditor/ckeditor5-paragraph": "^10.0.4",
    "@ckeditor/ckeditor5-theme-lark": "^12.0.0",
    "postcss-loader": "^3.0.0",
    "raw-loader": "^0.5.1",
    "style-loader": "^0.23.1",
    "webpack": "^4.27.1"
  }
}

Then install the listed packages. The @ckeditor/ packages are all needed for the CKEditor to work and the other ones are needed to support the backend framework. The scripts build command uses webpack to bundle all the JavaScript and CSS from the ckeditor packages into minified bundles. This tool will allow us to take our Node packages and combine them into one file and then load that into a simple HTML file instead of having to use a framework like Express or Koa.

Now to install all those listed dependencies in the packages.json file use:

npm install

And to create the needed project files:

touch webpack.config.js index.html app.js

And there you go now we have the basic project structure with the needed files!

Webpack

Its time to setup webpack and point it to which files to bundle together. This is done in the webpack.config.js file.

// webpack.config.js

'use strict';

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

module.exports = {
  // https://webpack.js.org/configuration/entry-context/
  entry: './app.js',

  // https://webpack.js.org/configuration/output/
  output: {
    path: path.resolve( __dirname, 'dist' ),
    filename: 'bundle.js'
  },

  module: {
    rules: [
      {
        // Or /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.svg$/ if you want to limit this loader
        // to CKEditor 5 icons only.
        test: /\.svg$/,

        use: [ 'raw-loader' ]
      },
      {
        // Or /ckeditor5-[^/]+\/theme\/[^/]+\.css$/ if you want to limit this loader
        // to CKEditor 5 theme only.
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader',
            options: {
              singleton: true
            }
          },
          {
            loader: 'postcss-loader',
            options: styles.getPostCssConfig( {
            themeImporter: {
            themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
            },
              minify: true
            })
          },
        ]
      }
    ]
  },

  // Useful for debugging.
  devtool: 'source-map',

  // By default webpack logs warnings if the bundle is bigger than 200kb.
  performance: { hints: false }
};

And thats all thats needed for webpack to pickup the css, js, and even svg files.

Node Code

At this point lets set up our editor through a simple Nodejs script that combines all the needed packages and sets the configuration. Add the following to the app.js file.

// app.js

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';

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

This will look for any element with the id editor and replace it with a rich text editor that has a bold and an italic button on the toolbar. While this is a minimalist implementation of CKEditor its easy to add more options through the many plugins and then just modifying this app.js file

HTML

And finally its time to write our HTML code that will display our editor. Since our app.js script is replacing the id editor with the CKEditor instance this HTML file can be very simple.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>CKEditor 5 Framework – Quick start</title>
    </head>
    <body>
        <div id="editor">
            <p>Editor content goes here.</p>
        </div>

        <script src="dist/bundle.js"></script>
    </body>
</html>

Bundle and Run

With the index file created its time to run webpack and bundle our application together so that the <script src="dist/bundle.js"></script> line can pickup our whole application.

npm run build // Or directly run webpack --mode development

And now open up the index.html file in your favorite browser and check out your simple rich text editor!

If you want to add more to this implementation checkout the plugins list here.

Summary

In this example we saw how to use webpack to bundle together node, css, and svg files and then load them into an HTML file to display a simple rich text editor CKEditor.

Tyler Moon

Published a year ago

Comments?

Leave us your opinion.