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
- 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',
...
]
...
}
- Integrate the CK Editor into your HTML page and load in the normal way.
- The CodeCogs Equation Editor will appear in the toolbar group you specified when creating the editor.
Install Without NPM
- Install the CK Editor as they recommend.
- 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.
- Download CK-EqnEditor-plugin and uncompress it:
Download the plugin source code
- 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',
...
]
...
}
- Note: The EqnEditor requires the Image and MediaEmbed plugins from CKEditor, so ensure those have been installed either with npm or their, online builder
- Integrate the CK Editor into your HTML page and load in the normal way.
- The CodeCogs Equation Editor will appear in the toolbar group you specified when creating the editor.
Change History
- v1.2 - Our first version for CKEditor v4, which builds on our earlier version for CKEditor v3
- v1.3 - 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 plugings 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).