The Equation Editor plugin for CK Editor
fx
button on the CK Editor toolbar, to launch the CodeCogs Equation Editor.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'
}
})
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'
}
})
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