如何从 TinyMCE 的 fMath 编辑器插件中获取 MathML/Latex 代码？

Question

我需要使用 TinyMCE 编辑器，但我还需要能够编辑数学方程式和公式。我在我的 TinyMCE 安装中添加了 FMath 编辑器插件。

是的，它有效，我可以添加方程式，但方程式是生成的 img 标签，其中包含 src 包含 blob： http url 这意味着图像存在于浏览器内存中，一旦浏览器关闭就会被删除。

是的，使用 AJAX 的 blob img 标签有一些技巧，但问题是，我希望能够在数据库中保存我编辑的文本和数学方程式。

我认为最好的方法是在数据库中保存方程的 MathML / Latex 表示。障碍是，FMath 编辑器的文档很差，所以我不知道如何获得这个生成的 MathML / Latex 代码。

那我该怎么做，是否有一些 FMath 函数，getMathML() 代码等等...？

问题是通过TinyMCE访问插件API很热？

Answer 1

如果您要检查 TinyMCE 插件文件夹中的 plugin.min.js FMath，它会在 TinyMCE 创建的 iframe 中加载 html 页面 OnlyEditor.html。此 html 页面包含 getter 个函数，如下所示：

<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>

所以 getMathML() returns xml 格式的原始 MathML。 getImage() returns 生成图像的 blob address/data。您还可以使用 setMathML(mathml) 来设置 FMath 编辑器以加载您的特定公式。

Answer 2

我已经开发了自定义插件解决方案，请看一下： https://github.com/Axel186/mathsymbols-tinymce-plugin

它使用 MathJax 渲染字体。它是免费的，并且拥有 MIT 许可证。

看看我的其他插件，您可能有兴趣使用数学函数生成一些图表或图形。

如何从 TinyMCE 的 fMath 编辑器插件中获取 MathML/Latex 代码？

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

javascript

math

jquery

tinymce

tinymce-4