CodeCogs® | Equation Editor
:: Table of Contents
FxEditor
User guideQuickstartDeploymentAPIDesign
FxTeX
APIExamplesRight-click menuAccessibility
FxTeX Server
OverviewAPIAccess and keysSelf-hosting
Plugins
OverviewCKEditor 5TinyMCE 6 and 7BloggerAngularFroalaTiptap
WordPressMoodleGoogle Docs and SlidesCanvas, Blackboard and LTITiddlyWikiWriting your own
Licensing
How licensing works

Tiptap

The fxEditor extension for Tiptap 2, the editor framework built on ProseMirror. Tiptap is headless — it has no toolbar of its own — so the extension provides a command, and you call it from whatever button your interface already has.

Preview. This extension is new and not yet published to npm. Contact us for a copy. It ships as plain ES modules for your own bundler.

Installation

npm install @codecogs/eqneditor-tiptap
import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
import { EqnEditor } from '@codecogs/eqneditor-tiptap';
import '@codecogs/eqneditor-tiptap/eqneditor.css';

const editor = new Editor({
  element: document.querySelector('#editor'),
  extensions: [
    StarterKit,
    EqnEditor.configure({
      server: 'fxeditor.codecogs.com',
      licence: 'fx_pk_your-key-here'      // from the licence manager
    })
  ]
});

myToolbarButton.addEventListener('click', () => {
  editor.commands.insertEquation();
});

insertEquation() opens the equation editor in a dialog and inserts the result at the selection.

What gets inserted

The author chooses in the dialog: MathML (the default) or an SVG image drawn by fxTeX Server. Either is stored as a Tiptap node that carries its LaTeX, and survives getHTML() and setContent() intact. See What every plugin shares for the stylesheet a page showing MathML needs.

Configuration

licenceYour fxEditor licence key. Required.
serverHost the equation editor is loaded from: 'fxeditor.codecogs.com'.
renderUrlThe fxTeX Server that draws equations inserted as images: 'https://fxtex.codecogs.com', or your own.
scriptUrlFull URL of the equation editor bundle.
cssUrlFull URL of the equation editor stylesheet.
mathmlCssUrlThe MathML stylesheet loaded into the editing area.
HTMLAttributesExtra attributes for the equation's rendered element, as for any Tiptap node.
Copied to clipboard