CodeCogs®FxEditor
User guideQuickstartDeploymentAPIDesign
FxTeX
APIExamplesRight-click menuAccessibilityFxTeX Server
OverviewAPIAccess and keysSelf-hostingPlugins
OverviewCKEditor 5TinyMCE 6 and 7BloggerAngularFroalaTiptapWordPressMoodleGoogle Docs and SlidesCanvas, Blackboard and LTITiddlyWikiWriting your ownLicensing
How licensing worksDesign
The toolbar, the markup pane, the equation view, undo history, live suggestions — each piece of the editor is linked into your page on its own, and each is optional. What panels the toolbar holds, how many rows they sit in, how big the buttons are, even what colour the whole thing takes: none of it is fixed, all of it is something your page decides. Build one below, then read on for every way of specifying what you have built by hand.
Try it: Build your own
Switch pieces on or off, drag panels between the bin and up to three toolbar rows, pick a colour, size things the way you want them, and choose what the equation comes out as. The preview is a real, live editor - not a picture of one - and the code to generate it is below.
More panels 0
The code
Toolbar Selection
There are a small set of toolbar selections that quickly establish a common set, like the mini toolbar:
<div id="toolbar"></div>
<div id="input"></div>
<script>
var tb = new EqEditor.Toolbar('toolbar','mini');
tb.addTextArea(new EqEditor.TextArea('input'), true);
</script>
Alternatively you can provide a JASON array of the panels you want on each row of the toolbar:
<div id="toolbar"></div>
<div id="input"></div>
<script>
var tb = new EqEditor.Toolbar('toolbar', [["operators_core","greeklower","chemistry_arrows",
"mhchem","mhchem_arrows","colors"]]);
...
</script>
Toolbar Collections
The following preset toolbar collections include:
| Name | Panels on each row |
|---|---|
| "full" | style | spaces | binary | symbols | foreign | subsupset | accents | accents_ext | arrows |
| operators | brackets | greeklower | greekupper | relations | matrix | colors | |
| "mini" | operators_core | brackets | greeklower | arrows | matrix | colors |
| "chemistry" | operators | brackets |symbols | arrows | chemistry_arrows | mhchem | mhchem_arrows | matrix | color |
Toolbar Panels
The available standard panels include:
| Panel Name | Description |
|---|---|
| "brackets" | Brackets and groups |
| "matrix" | Matrix and Vectors |
| "binary" | Binary Operators and Symbols |
| "subsupset" | Super and sub setting |
| "relations" | Set releations |
| "arrows" | Arrows |
| "style" | Styling |
| "foreign" | None ASCII letters |
| "symbols" | Symbols |
| "spaces" | Forces spacing between letters |
| "accents" | Common letter accents |
| "accents_ext" | Extended set of letter accents |
| "greeklower" | Lowercase greek letters |
| "greekupper" | Upper case greek letters |
| "operators" | Full set of supported operators, include \sum and \prod |
| "operators_core" | Most commonly used operators, such as \sum |
| "chemistry_letters" | Chemical Letters |
| "chemistry_arrows" | Chemical Equation arrows |
| "colors" | Foreground colors |
| "mhchem" | Commands for typesetting chemical molecular formulae |
| "mhchem_arrows" | Commands for typesetting chemical arrows |
This list forms the current base set. Any other panels can be constructed quickly, so please submit the LaTeX behind panel you would like to see and we can add this to the list.
More
API reference — the methods that build a toolbar panel by panel.
Deployment — worked examples of each arrangement.
Contact us — to have a panel added to the base set.