:: Table of Contents
Usage
QuickstartEditor integrationAPIDesignLaTeX rendering
Plugins
LaTeX ITCK Editor v5Tiny MCE v6BloggerAngularDeveloper Guide

Tiny MCE v6 - plugin

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

Usage

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

Quick Installation with NPM

  1. In your existing TinyMCE Editor npm build, install the Equation Editor plugin like: npm i @codecogs/eqneditor-tinymce6, if you don't have TinyMCE yet, see their documentation: Tiny MCE Editor
  2. Wherever you load in the scripts for your webpage displaying the editor, load the Equation Editor plugin after TinyMCE
  3. Additionally add the Equation Editor plugin to your TinyMCE initialisation script
  4. For a simple HTML webpage, the final initialisation should look something like this:

    e.g. HTML, add the following to <head> :

    <script src="[PATH]/node_modules/@codecogs/eqneditor-tinymce6/eqneditor.js"></script>
<script>
	// Initialises TinyMCE text area
	tinymce.init({
		selector: '#mytextarea',
		plugins: 'eqneditor',
		toolbar: 'eqneditor'
	});
</script>
  5. Open your webpage and you should see the Equation Editor icon appear in your toolbar like the example above.

Install Without NPM

  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

    We provide you with the HTML file as an example, but you only actually need the JS file.

  3. Wherever you load in the scripts for your webpage displaying the editor, load the Equation Editor plugin after TinyMCE
  4. Additionally add the Equation Editor plugin to your TinyMCE initialisation script
  5. For a simple HTML webpage, the final initialisation should look something like this:

    e.g. HTML, add the following to <head> :

    <script src="PATH/TO/UNZIPPED/FILES/eqneditor.js"></script>
<script>
	// Initialises TinyMCE text area
	tinymce.init({
		selector: '#mytextarea',
		plugins: 'eqneditor',
		toolbar: 'eqneditor'
	});
</script>
  6. Open your webpage and you should see the Equation Editor icon appear in your toolbar like the example above.

Change History

Copied to clipboard