CK Editor v5.x - plugin ^v3

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.

Example toolbar: CodeCogs Equation Editor button highlighted in a red circle.

Quick Installation with NPM

1. In your existing npm project that is setup with CK Editor 5, run: npm i @codecogs/eqneditor-ckeditor5

Create a CKEditor with EqnEditor :

import Eqneditor5 from '@codecogs/eqneditor-ckeditor5/src/eqneditor5';
import Image from '@ckeditor/ckeditor5-image/src/image';
import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed';

ClassicEditor.create( document.querySelector( '#editor' )) {
	plugins: [
		Eqneditor5,
        Image,
		MediaEmbed
        ...
    ],
    toolbar: [
		'eqneditor5Button',
        ...
    ]
    ...
}

2. Integrate the CK Editor into your HTML page and load in the normal way.
3. The CodeCogs Equation Editor will appear in the toolbar group you specified when creating the editor.

Install Without NPM

1. Install the CK Editor as they recommend.
2. Because this method does not use a package manager you must ensure you have the correct dependencies installed:
   • CKEditor-image
   • CKEditor-media-embed>
   Additional plugins are up to you but those are required for the equation editor plugin to function.
3. Download CK-EqnEditor-plugin and uncompress it:
   Download the plugin source code
4. Locate the file where you create your CKEditor, and modify it so it includes the following imports and initialisations:

   Create a CKEditor with EqnEditor :

   import Eqneditor5 from '@codecogs/eqneditor-ckeditor5/src/eqneditor5';
   import Image from '@ckeditor/ckeditor5-image/src/image';
   import Eqneditor5 from 'PATH/TO/UNZIPPED/FILES/eqneditor5.js';
   
   ClassicEditor.create( document.querySelector( '#editor' )) {
   	plugins: [
   		Eqneditor5,
           Image,
   		MediaEmbed
           ...
       ],
       toolbar: [
   		'eqneditor5Button',
           ...
       ]
       ...
   }
   

5. Note: The EqnEditor requires the Image and MediaEmbed plugins from CKEditor, so ensure those have been installed either with npm or their, online builder
6. Integrate the CK Editor into your HTML page and load in the normal way.
7. The CodeCogs Equation Editor will appear in the toolbar group you specified when creating the editor.

Change History

• v1.2 (deprecated) - Our first version for CKEditor v4, which builds on our earlier version for CKEditor v3
• v1.3 (deprecated) - Improvement 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.
• v2.2 - General update in line with the movement of CodeCogs to new servers. (Recommended upgrade).
• v3 - Adds compatibility for CKEditor v5.