:: Table of Contents
Plugins
OverviewHTML editors
CKEditor 5 CKEditor 4 TinyMCE 6 and 7 TinyMCE 4 Froala Tiptap AngularCMS and LMS
WordPress Moodle Canvas, Blackboard and LTI BloggerOther
Google Docs and Slides TiddlyWikiDevelopers
Writing your own
Angular
This page describes how to add the equation editor to TinyMCE in an Angular application, using npm.
TinyMCE
From your project's root directory, install the equation editor plugin:
npm install @codecogs/fxeditor-tinymce
Add the plugin script to your Angular build configuration's scripts array, after node_modules/tinymce/tinymce.min.js:
"node_modules/@codecogs/fxeditor-tinymce/eqneditor.js"
Update the TinyMCE configuration in your component template, typically src/app/app.component.html, as follows:
<editor [init]="{
plugins: 'lists link image table code help wordcount eqneditor',
toolbar: 'bold italic underline eqneditor',
base_url: '/tinymce',
suffix: '.min',
eqneditor_server: 'fxtex.codecogs.com',
eqneditor_licence: 'fx_pk_your-key-here',
eqneditor_design: { colour: '#0f7a4d' }
}"></editor>
The last three lines point the plugin at the equation editor, activate it with your licence key and, optionally, set its design (build one on the TinyMCE page). The key is in the licence manager. Every other option is as described on the TinyMCE page.
Copied to clipboard
CodeCogs®