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 Tiny MCE (v1.1)

This Tiny MCE plugin that allows equations to be created in HTML.

Examples:

Example

Usage

  • To create a new equation, click the 'fx' button on the TinyMCE 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.

Tiny MCE
Example toolbar, CodeCogs Equation Editor button is bottom right.

Download

zip tinymce_v1.1.zip


Key Files:

js editor_plugin.js

Quick Installation

  1. Install the Tiny MCE Editor.
  2. Download tinymce_v1.1.zip and uncompress it to your desktop or server.
  3. Find the folder where you installed Tiny MCE. For our purposes we will assume this is "~/tinymce".
  4. Open the Tiny Mce plugins folder, "~/tinymce/plugins" and copy in the directory equation from the uncompressed tinymce_v1.1.zip.
  5. Integrate Tiny MCE into your web page in the normal way.
  6. Locate the plugins property, within the function tinyMCE.init and add the equation plugin. If you are unable to find the plugins property please add it.
  7. Now locate the theme_advanced_buttons1 property and add the button called equation.
  8. When you're done, the call of tinyMce.init should resemble :
    <head>
    <script type="text/javascript">
    tinyMCE.init({
    plugins : 'equation',
    mode : "textareas",
    theme : "advanced",
    theme_advanced_buttons1 :
      "equation,bold,italic,underline,separator,strikethrough,justifyleft",
    theme_advanced_buttons2 : "",
    theme_advanced_buttons3 : "",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom"
    });
    </script>
    </head>
    <body>
    <textarea name="content" style="width:100%"></textarea>
    </body>