How to get MathML/Latex code from fMath Editor plugin for TinyMCE?

Question

I need to use TinyMCE editor but I also need to be able to edit mathematical equations and formulas. I added the FMath editor plugin in my TinyMCE installation.

Yes it works and I can add equations but the equations are generated img tags with src containing blob:http url which means, the image exists in browser memory and gets deleted once the browser is closed.

Yes there are couple of tricks how to do something with the blob img tag with AJAX, but the problem is, I want to be able to save my edited text plus math equations in database.

I think the best approach is to save the MathML / Latex representation of the equation in database. The obstacle is, FMath editor has poor documentation, so I am not aware how to get this generated MathML / Latex code.

So how can I do that, is there some FMath function, getMathML() code or so...?

The problem is hot to access the plugin API trough TinyMCE?

Answer 1

I have developed custom plugin solution, please take a look: https://github.com/Axel186/mathsymbols-tinymce-plugin

It uses MathJax to render the font. It's free and has MIT license.

Take a look at my other plugins, you may be interested to generate some charts or graphs by using math functions.

Answer 2

If you were to check the plugin.min.js for FMath in TinyMCE plugins folder, it loads a html page OnlyEditor.html in the iframe created by TinyMCE. This html page contains getter functions like so:

<script type="text/javascript">

    var e1 = $("#editor1").mathEditor({ width: 1000, height: 400 }),
        mathml = null;

    e1.mathEditor("setSaveCallback", clientSaveMethod);

    function clientSaveMethod(){
        // get info from editor ex: get image
        console.dir(e1.mathEditor("getMathML", "UNICODE", "true"));
    }

    function getMathML(){
        return e1.mathEditor("getMathML", "UNICODE", "true");
    }

    function getBlobOrUrl(returnFunc){
        return e1.mathEditor("getBlobOrUrl", returnFunc, "UNICODE", "true");
    }

    function setMathML(mathml){
        e1.mathEditor("setMathML", mathml);
    }

    function getImage(){
        return e1.mathEditor("getImage","png");
    }

    function getMathMLToLoad(){
        return null;
    }

    // autoload used in tinyMCE editor - do not delete
    if (window.parent !== null && window.parent.getMathMLToLoad !== null) {
        mathml = window.parent.getMathMLToLoad();

        if (mathml !== null) {
            e1.mathEditor("setMathML", mathml);
        }
    }
</script>

So getMathML() returns the raw MathML in xml format. getImage() returns the blob address/data of the generated image. You can also use setMathML(mathml) to set the FMath editor to load your specific formula.