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

Tiny MCE plugin - v4.x

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

Usage

  • To create a new equation, click the fx button on the TinyMCE 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.
Tiny MCE
Example toolbar, CodeCogs Equation Editor button is bottom right.

Quick Installation

  1. Install the Tiny MCE Editor as they recommend.
  2. Download TinyMCE-EqnEditor-plugin and uncompress it to your desktop or server.
    Download TinyMCE Editor EqnEditor.zip
  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 eqneditor directory from the uncompressed .
  5. Integrate Tiny MCE into your web page in the normal way.
  6. On your web page, locate the TinyMCE.init function, and modify (or add) the plugin property so it contains plugins : 'eqneditor',
  7. Now locate the toolbar property and add our new button eqneditor.
  8. The final code should resemble:

    Add to <head> :

    <script>
tinymce.init({
	plugins: [
	"eqneditor advlist autolink lists link image charmap print preview anchor",
	"searchreplace visualblocks code fullscreen",
	"insertdatetime media table contextmenu paste" ],
	toolbar: "undo redo | eqneditor link image | styleselect | bold italic | bullist numlist outdent indent	",
	selector : "textarea"  
	});
</script>

    Add to <body> :

    <textarea name="content" style="width:100%"></textarea>
  9. Load your page and enjoy!

Change History

  • v1.2 (deprecated) - Our first version for TinyMCE v4, which builds on our earlier version for TinyMCE v3
  • v1.3 (deprecated) - Improvement support for secure websites. Fixed bug that prevented equations being edited.
  • v2 - Improved integration with TinyMCE, using TinyMCE 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 TinyMCE v6.
  • v3 - Adds compatibility for new editor for TinyMCE v4 & v5.
Copied to clipboard