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

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. Try it:

Open the example on its own ↗

Preview. This extension is new and not yet on npm as @codecogs/fxeditor-tiptap. Until it is, take it from the download in Customise and download, or import it from this site as the example does. It is plain ES modules, for your own bundler or a browser import map.

Installation

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

const editor = new Editor({
  element: document.querySelector('#editor'),
  extensions: [
    StarterKit,
    EqnEditor.configure({
      server: 'fxtex.codecogs.com',
      licence: 'fx_pk_your-key-here',     // from the licence manager
      design: { colour: '#0f7a4d' }       // optional - see Customise and download below
    })
  ]
});

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

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

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 Tiptap 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 Tiptap 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 Tiptap 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 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.
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.
serverHost the equation editor is loaded from: 'fxtex.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