CodeCogs® | fxEditor Plugins
:: Table of Contents
Plugins
Overview
HTML editors
CKEditor 5 CKEditor 4 TinyMCE 6 and 7 TinyMCE 4
Froala Tiptap Angular
CMS and LMS
WordPress Moodle Canvas, Blackboard and LTI Blogger
Other
Google Docs and Slides TiddlyWiki
Developers
Writing your own

TinyMCE 4

The fxEditor plugin for TinyMCE 4 adds an fx button to the toolbar that opens the equation editor in a dialog, and inserts the result at the cursor. It is for sites still running TinyMCE 4; on a newer version use TinyMCE 6 and 7. Try it:

Open the example on its own ↗

Usage

  • Click where the equation should go, then click fx on the toolbar.
  • Build the equation in the maths view. The LaTeX markup toggle, bottom left, shows the LaTeX instead; the two stay in step as you edit either.
  • Choose how it is inserted from Insert as, then OK.
  • Double-click an existing equation to edit it again.

Installation

  1. Copy the plugin's folder, plugins/eqneditor, into your TinyMCE 4's own plugins folder. It is in the download below, under tinymce4-plugin/.
  2. Load it, add EqnEditor to your toolbar, and give it your licence key:
tinymce.init( {
    selector: '#mytextarea',
    plugins: 'eqneditor',
    toolbar: 'undo redo | bold italic | eqneditor',

    eqneditor_server: 'fxtex.codecogs.com',
    eqneditor_licence: 'fx_pk_your-key-here',    // from the licence manager
    eqneditor_design: { colour: '#0f7a4d' }      // optional - see Customise and download below
} );

The equation editor itself is fetched from fxtex.codecogs.com the first time it is needed, so you always get the current editor.

The licence key activates the equation editor for your domain. Without it, equations show the reason they cannot render in place of the maths. Your key is in the licence manager.

Customise and download

Make the equation editor your own: choose what it shows, drag panels from More panels into up to three toolbar rows, and pick a colour and sizes. The preview is the real TinyMCE 4 page, rebuilt as you go. Then add your licence key and download it: an example.html with a page of equations to edit, loading everything it needs from fxplugins.codecogs.com.

Show
Colour

Your toolbar

Row 1
Row 2
Row 3

More panels 0

Dialog
Toolbar
Text
Preview

Your design

The option that gives TinyMCE 4 this design — it is already in the download. Leave it out and the editor uses the standard design.

Your key is in the licence manager on fxEditor — or get one. Without a key, the download still works: equations show why they cannot render until you add one.

Complete example

The whole of the page running above: a simple, complete HTML page that loads TinyMCE 4 and the plugin. Every file comes from fxplugins.codecogs.com, so it works as it is — put in your own licence key. (Keys are shortened here.)

What gets written into the page

The author chooses in the dialog: MathML (the default) or an SVG image drawn by fxTeX Server, with the LaTeX as its alt text. See What every plugin shares for the difference, and for the one stylesheet a page showing MathML needs.

Configuration

eqneditor_licenceYour fxEditor licence key. Required.
eqneditor_designThe editor's look: dialog width, height and scale, toolbar panels and size, colour, equation and markup sizes, undo/redo, how the dialog opens. Build one in Customise and download; see A design.
eqneditor_server'fxtex.codecogs.com'Host the equation editor's own code is loaded from. A bare host means https; a full origin is used as it is.
eqneditor_render_url'https://latex.codecogs.com'The rendering service for equations inserted as images. Point it at a self-hosted fxTeX Server to keep equations inside your network.
eqneditor_script_urlfrom serverFull URL of the equation editor bundle.
eqneditor_css_urlfrom serverFull URL of the equation editor stylesheet.
eqneditor_mathml_css_urlfrom serverThe MathML stylesheet loaded into the editing area.

Change History

  • v1.2 (deprecated) - Our first version for TinyMCE v4, which builds on our earlier version for TinyMCE v3.
  • v1.3 (deprecated) - Improved support for secure websites. Fixed a bug that prevented equations being edited.
  • v2 - Improved integration with TinyMCE, using TinyMCE dialogs that appear on the page.
  • v2.1 - Allows more equation 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.
  • v3 - Rewritten against the current fxEditor: the WYSIWYG maths view, MathML or SVG images, a licence key and the design option.
Copied to clipboard