CodeCogs® | Equation Editor
:: Table of Contents
FxEditor
User guideQuickstartDeploymentAPIDesign
FxTeX
APIExamplesRight-click menuAccessibility
FxTeX Server
OverviewAPIAccess and keysSelf-hosting
Plugins
OverviewCKEditor 5TinyMCE 6 and 7BloggerAngularFroalaTiptapWordPressMoodleGoogle Docs and SlidesCanvas, Blackboard and LTITiddlyWikiWriting your own
Licensing
How licensing works

CK Editor v4.x - plugin v2.2

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.
CK Editor
Example toolbar: CodeCogs Equation Editor button highlighted in a red circle.

Quick Installation

  1. Install the CK Editor as they recommend.
  2. Download CK-EqnEditor-plugin and uncompress it:
    Download CKEditor EqnEditor.zip
  3. Find the folder where you installed CK Editor. For our purposes we will assume this is ~/ckeditor.
  4. Open the CK Editor plugins folder ~/ckeditor/plugins and copy in the directory equation/ from the uncompressed folder you downloaded.
  5. Modify the config.js to load the plugin by adding config.extraPlugins = 'eqneditor';, i.e.

    Modify config.js :

    CKEDITOR.editorConfig = function(config) {
	config.extraPlugins = 'eqneditor';
	
	config.toolbarGroups = [
		...
	];
  6. Integrate the CK Editor into your HTML page and load in the normal way.
  7. The CodeCogs Equation Editor will appear within the insert toolbar Group.
  8. If you are using a customised toolbar, ensure EqnEditor is included in the list of buttons, e.g:

    Add to <body> :

    <textarea id="editor1" name="editor1"></textarea>
<script>
  CKEDITOR.replace( 'editor1', { toolbar : [ [ 'EqnEditor', 'Bold', 'Italic' ] ] });
</script>

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.
Copied to clipboard