CK Editor v5 - plugin

The Equation Editor plugin for CK Editor

Usage

To create a new equation, first click within the text area where you need to add the equation.
Click the fx button on the CK Editor toolbar, to launch the CodeCogs Equation Editor.
Create your equation.
Select Ok to insert the equation into your document at the cursor position.
Double-click existing equations to edit them in the Equation Editor.

Installation into existing ckeditor project with npm

To install the plugin into an existing ckeditor project first install the package into your project by running this command at its root directory

npm install @codecogs/eqneditor-ckeditor5

Then, import the eqEditor5 plugin into the file where your ckEditor is being instantiated

import { eqnEditor5 } from '@codecogs/eqneditor-ckeditor5';

Additionally, ensure that you are importing the built-in image plugin from ckEditor, as it is required for the equation editor to work

// other ckeditor imports go within the same statement
import { Image } from 'ckeditor5';

Afterwards, simply add the Image and eqnEditor plugins to your existing editor instance

.create( document.querySelector( '#editor' ), {
    licenseKey: 'GPL',
    plugins: [ Essentials, Bold, Italic, Font, Paragraph, eqnEditor5, Image ],
    toolbar: [
        'undo', 'redo', '|', 'bold', 'italic', '|',
        'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'timestamp', 'EqnEditor5'
    ],
})

Optionally, configuration can be added to change which server the plugin attempts to generate images on

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        licenseKey: 'GPL',
        plugins: [ Essentials, Bold, Italic, Font, Paragraph, eqnEditor5, Image ],
        toolbar: [
            'undo', 'redo', '|', 'bold', 'italic', '|',
            'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'timestamp', 'EqnEditor5'
        ],
        eqnEditor: {
            Server: 'latex.oncodecogs.com'
        }
    })

Installation for projects without an existing ckeditor installation

Run the following commands at the project root to install both ckeditor and eqneditor

npm install @codecogs/eqneditor-ckeditor5
npm install ckeditor5

In the JavaScript for the page you want to import the required ckeditor dependencies and the eqneditor itself

import { ClassicEditor, Essentials, Bold, Italic, Font, Paragraph, Image } from 'ckeditor5';
import { eqnEditor5 } from '@codecogs/eqneditor-ckeditor5';

Then, create a new ckeditor editor object, ensuring that the image and eqneditor plugins have been enabled

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        licenseKey: 'GPL',
        plugins: [ Essentials, Bold, Italic, Font, Paragraph, eqnEditor5, Image ],
        toolbar: [
            'undo', 'redo', '|', 'bold', 'italic', '|',
            'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'timestamp', 'EqnEditor5'
        ]})

Optionally, configure the server used by eqneditor

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        licenseKey: 'GPL',
        plugins: [ Essentials, Bold, Italic, Font, Paragraph, eqnEditor5, Image ],
        toolbar: [
            'undo', 'redo', '|', 'bold', 'italic', '|',
            'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'timestamp', 'EqnEditor5'
        ],
        eqnEditor: {
            Server: 'latex.oncodecogs.com'
        }
    })

Creating a basic web server running ckeditor and eqneditor5

Install required packages at project root:

npm install --save-dev css-loader@^7.1.2
npm install --save-dev raw-loader@^4.0.2
npm install --save-dev style-loader@^4.0.0
npm install --save-dev webpack@^5.92.0
npm install terser-webpack-plugin --save-dev
npm install ckeditor5@^45.2.1
npm install @codecogs/eqneditor-ckeditor5@^1.0.1
npm install express@^4.18.2
npm install nodemon@^3.0.2
npm install webpack-cli@^6.0.1

Create index.html in public:

<html>
  <head>
    <meta charset="UTF-8">
    <title>CKEditor 5 with EqnEditor5</title>
    <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/45.2.0/ckeditor5.css">
  </head>
  <body>
    <textarea id="editor"></textarea>
    <script src="bundle.js"></script>
  </body>
</html>

Create index.js in the root:

const express = require('express');
const path = require('path');

const app = express();

// Serve static files from 'public' directory
app.use(express.static(path.join(__dirname, 'public')));

// Optional: Redirect '/' to '/index.html' explicitly
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

const PORT = process.env.PORT || 8000;
app.listen(PORT, () => {
  console.log(`Server running at http://localhost:${PORT}`);
});

Create index.js in src:

import { ClassicEditor, Essentials, Bold, Italic, Font, Paragraph, Image } from 'ckeditor5';
import { eqnEditor5 } from '@codecogs/eqneditor-ckeditor5';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        licenseKey: 'GPL',
        plugins: [ Essentials, Bold, Italic, Font, Paragraph, eqnEditor5, Image ],
        toolbar: [
            'undo', 'redo', '|', 'bold', 'italic', '|',
            'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'timestamp', 'EqnEditor5'
        ],
        eqnEditor: {
            Server: 'latex.oncodecogs.com'
        }
    });

Create webpack.config.js:

const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = (env, argv) => {
  const isDev = argv.mode === 'development';

  return {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'public'),
    },
    module: {
      rules: [
        {
          test: /\.css$/i,
          use: ['style-loader', 'css-loader'],
        },
        {
          test: /\.(png|jpe?g|gif|svg)$/i,
          type: 'asset/resource',
        } 
      ],
    },
    mode: isDev ? 'development' : 'production',
    optimization: {
      minimize: !isDev,
      minimizer: isDev
        ? [
            new TerserPlugin({
              terserOptions: {
                mangle: false,
                compress: false,
                format: {
                  beautify: true,
                },
              },
            }),
          ]
        : undefined,
    },
  };
};

Then run:

npx webpack --mode development

Finally, start the server:

nodemon index.js

Change History

v1.2 (deprecated) - Our first version for CKEditor v4, which builds on our earlier version for CKEditor v3
v1.3 (deprecated) - Improved support for secure websites. Fixed bug that prevented equations being edited.
v2 - Improved integration with the CKEditor, using CKEditor dialogs that appear on page.
v2.1 - Bug fix that allows more Eqn plugins to work with multiple edit areas on a single page.
v3 - Adds compatibility for CKEditor v5.