TinyMCE MathLive Plugin

TinyMCE MathLive Plugin is a custom addon for the TinyMCE rich text editor. This plugin allows you to create and embed mathematical formulas, leveraging Cortex MathLive for formula editing and supporting rendering via MathML. Additionally, it can convert MathML and LaTeX expressions into SVG images using services like LaTeX Codecogs.

🚀 Installation

1. Copy the Plugin Folder

Copy the entire mathlive folder from the build directory (typically located in dist/) into TinyMCE's plugins/ directory:

/tinymce/
├── tinymce.min.js
└── plugins/
  └── mathlive/
     └── plugin.min.js

Note: Ensure that all files referenced within the plugin (e.g., mathlive.min.js) have the correct relative paths.

📄 Usage in HTML

1. Include TinyMCE and Plugin Scripts

Add the following scripts to your HTML file:

<!-- TinyMCE -->
<script src="tinymce/tinymce.min.js"></script>

<!-- MathLive Plugin -->
<script src="tinymce/plugins/mathlive/plugin.min.js"></script>

2. Set Up Editor and Preview Containers

Insert a textarea for the editor and a container for previewing the content:

<textarea id="mytextarea"></textarea>
<div id="preview"></div>

3. Initialize TinyMCE with the MathLive Plugin

Configure and initialize TinyMCE, including live preview functionality and conversion of MathML/LaTeX into images:

<script>
  $(document).ready(function () {
    const configs = {
      selector: "#mytextarea",
      plugins: ["mathlive"],
      toolbar: "mathlive-btn",
      setup: (editor) => {
        editor.on("input change keyup", () => {
          const content = editor.getContent();
          $("#preview").html(content);
        });
      },
      // Function to convert MathML and LaTeX into SVG images
      mathlive: {
        mathmlToImageFunction: async (mathML, latex) => {
          const img = document.createElement("img");
          img.classList.add("MathLiveFormula");
          img.setAttribute("role", "math");
          img.setAttribute(
            "src",
            `https://latex.codecogs.com/svg.image?${latex}`
          );
          img.setAttribute("data-mathml", mathML);
          img.setAttribute("data-latex", latex);
          return img.outerHTML;
        },
        menus: ["insert", "insert-matrix", "color"],
      },
    };

    tinymce.init(configs);
  });
</script>

📚 Menu List

Below is the list of functions available in the plugin menu:

• insert: Insert common mathematical symbols and icons.
• insert-matrix: Insert matrices.
  • add-row-above: Add a row above the current one.
  • add-row-below: Add a row below the current one.
  • add-column-before: Add a column before the current one.
  • add-column-after: Add a column after the current one.
  • delete-row: Delete the current row.
  • delete-column: Delete the current column.
  • environment-no-border: Convert to a borderless matrix.
  • environment-parentheses: Matrix with rounded brackets.
  • environment-brackets: Matrix with square brackets.
  • environment-bar: Matrix with vertical bars.
  • environment-braces: Matrix with curly braces.
• mode: Switch input modes.
  • mode-math: Switch to math mode.
  • mode-text: Switch to text mode.
  • mode-latex: Enter direct LaTeX mode.
• variant: Change the symbol style (italic, bold, fraktur, etc.).
• color: Change the text color.
• background-color: Change the background color of symbols.
• accent: Add accents such as circumflex or tilde.
• decoration: Apply decorations like underline or strikethrough.
• ce-evaluate: Evaluate expressions using Compute Engine.
• ce-simplify: Simplify expressions.
• ce-solve: Solve equations with unknown variables.
• cut: Cut the selected content.
• copy: Copy the selected content.
• copy-latex: Copy as LaTeX.
• copy-ascii-math: Copy as AsciiMath.
• copy-math-ml: Copy as MathML.
• paste: Paste content from the clipboard.
• select-all: Select all content in the math field.

This README provides basic installation and usage instructions for the TinyMCE MathLive Plugin. For additional details and the latest updates, please refer to the official documentation.