Recover Password

Or login with:

  • Facebookhttp://facebook.com/
  • Googlehttps://www.google.com/accounts/o8/id
  • Yahoohttp://yahoo.com/
advanced search
Integration
Plugins
3rd Party Links *
Videos featuring the Editor *
* Warning: CodeCogs is not responsible for content on external sites.
Products » Equation Editor »

Equations in CK Editor (v1.0)

This CK Editor plugin that allows equations to be created in HTML.

Examples:

Example

Usage

  • To create a new equation, click the 'fx' button on the CK Editor toolbar. This launches the Equation Editor.
  • Create your equation.
  • Select 'Copy to document' 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 in middle row on right.

Download

zip ckeditor_v1.zip


Key Files:

js plugin.js

Quick Installation

  1. Install the CK Editor.
  2. Download ckeditor_v1.zip and uncompress it to your desktop or server.
  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 ckeditor_v1.zip.
  5. Modify the config.js to load the plugin and include the equation button on the toolbar, as follows:

    CKEDITOR.editorConfig = function( config )
    {
    config.extraPlugins = 'equation';

    config.toolbar_Full =
    [
    ['Source','-','Save','NewPage','Preview','-','Templates'],
    ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
    ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
    ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
    '/',
    ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
    ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
    ['BidiLtr', 'BidiRtl' ],
    ['Link','Unlink','Anchor'],
    ['equation','Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe'],
    '/',
    ['Styles','Format','Font','FontSize'],
    ['TextColor','BGColor'],
    ['Maximize', 'ShowBlocks','-','About']
    ];

    config.toolbar_Basic =
    [
    ['equation', '-', 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
    ];

  6. Integrate the CK Editor into your page and load in the normal way:
    <head>
    <script type="text/javascript" src="http://latex.codecogs.com/integration/ckeditor/ckeditor.js"></script>
    </head>
    <body>
    <textarea id="editor1" name="editor1"></textarea>
    <script type="text/javascript">
    CKEDITOR.replace( 'editor1', { toolbar : 'Basic' });
    </script>
    </body>