Latex 公式在线可视化编辑器

寻觅

最近的一个demo需要用到Latex公式在线编辑器,从搜索引擎一般会得到类似http://latex.codecogs.com/eqneditor/editor.php的结果,这个编辑器的问题在于使用成本高,并且界面不美观。

继续探寻,发现了wiris Editor

支持mathml和latex:

那么就它了!

选型

首先,我们不会直接使用这个编辑器,只是在编辑公式的时候才使用,所以要选择合适的版本。

以前用过CKEditor,所以就这它了!选用java版本 我们的数据已经是latex的,在wiris 编辑器显示需要注意latex需要用两个$$包括起来 例如:

The history of $$\sqrt(2)$$.

但是CK版本的wiris对latex的支持是非可视化支持,在编辑器里输入latex还是显示为latex:

将焦点移动到$$内部,再点击按钮出现wiris的公式编辑器:

这种设计适合对latex熟悉的人员,可以裸写latex,同时对不熟悉的人来说,可以使用公式编辑器。但是,这样不直观啊!你让不会latex的看到的就一堆符号!

适配

简单试用可以发现,如果直接使用公式编辑器插入公式,是直观显示的:

可以看到保存的时候,mathml是:

<math class="wrs_chemistry" xmlns="http://www.w3.org/1998/Math/MathML">
    <msqrt>
        <mn>2</mn>
    </msqrt>
</math>

那么在latex输入情况下呢:

<math xmlns="http://www.w3.org/1998/Math/MathML">
    <semantics>
        <mrow>
            <msqrt><mo>(</mo></msqrt><mn>2</mn><mo>)</mo>
        </mrow>
        <annotation encoding="LaTeX">\sqrt(2)</annotation>
    </semantics>
</math>

原来问题在这里,正是mathML的区别导致处理的区别。也就是说一开始就生成不带LaTeX的mathML,然后再放入编辑器。简单查看代码,可以知道先调用wrs_endParse,再wrs_initParse就可以了。

CKEDITOR.on("instanceReady", function(event)
    {
        CKEDITOR.instances.example.focus();
        var mathxml = wrs_endParse("已知向量$$\\vec{a}=(\\sqrt{3},2)$$,$$\\vec{b}=(0,-2)$$,向量$$\\vec{c}=(k,\\sqrt{2})$$.$$\\vec{a}-1\\vec{b}$$与$$\\vec{d}$$共线,$$k=$$__.");
        CKEDITOR.instances.example.setData(wrs_initParse(mathxml));
        // 等待完成
        window.setTimeout(updateFunction,0);
    });

直观显示没问题了,但是mathml如何再转换成Latex呢?core.js里的wrs_parseMathmlToLatex函数是直接从mathml里将。。。里的内容提取出来:

function wrs_parseMathmlToLatex(content, characters){
    ....
    var openTarget = characters.tagOpener + 'annotation encoding=' + characters.doubleQuote + 'LaTeX' + characters.doubleQuote + characters.tagCloser;
 
        mathml = content.substring(start, end);

        startAnnotation = mathml.indexOf(openTarget);
        // 包含 encoding=latex,保留latex
        if (startAnnotation != -1){
            startAnnotation += openTarget.length;
            closeAnnotation = mathml.indexOf(closeTarget);
            var latex = mathml.substring(startAnnotation, closeAnnotation);
            if (characters == _wrs_safeXmlCharacters) {
                latex = wrs_mathmlDecode(latex);
            }
            output += '$$' + latex + '$$';
            // Populate latex into cache.
            wrs_populateLatexCache(latex, mathml);
        }else{
            output += mathml;
        }
   ......
}

但是现在的mathml不包含这个信息,如何处理?查看官方文档,发现有一个mathml2latex的服务,查看官方给的java demo里servlet并不包含这个服务,但是jar包里存在代码,于是自己封装一个servlet即可:

public class ServiceServlet extends com.wiris.plugin.dispatchers.MainServlet {

    @Override
    public void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response)
            throws ServletException, IOException {
        PluginBuilder pb = newPluginBuilder(request);
        String origin = request.getHeader("origin");
        HttpResponse res = new HttpResponse(response);
        pb.addCorsHeaders(res, origin);
        String pathInfo = request.getServletPath();
        if (pathInfo.equals("/mathml2latex")) {
            response.setContentType("text/plain; charset=utf-8");
            ParamsProvider provider = pb.getCustomParamsProvider();
            String mml = provider.getParameter("mml", (String)null);
            String r = pb.newTextService().mathml2latex(mml);
            PrintWriter out = response.getWriter();
            out.print(r);
            out.close();
        }

js里,调用这个服务:

var _wrs_mathmlCache = {};
function wrs_getLatexFromMathML(mml) {
    if (_wrs_mathmlCache.hasOwnProperty(mml)) {
        return _wrs_mathmlCache[mml];
    }
    var data = {
        'service': 'mathml2latex',
        'mml': mml
    };

    var latex = wrs_getContent(_wrs_conf_servicePath, data);
    // Populate LatexCache.
    if (!_wrs_mathmlCache.hasOwnProperty(mml)) {
        _wrs_mathmlCache[mml] = latex;
    }
    return latex.split("\r").join('').split("\n").join(' ');
}

wrs_getLatexFromMathML只能将一个mathml转换为latex,对于编辑器里的内容来说,需要将mathML抽取出来逐一转换:

function wrs_parseRawMathmlToLatex(content, characters){
    var output = '';
    var mathTagBegin = characters.tagOpener + 'math';
    var mathTagEnd = characters.tagOpener + '/math' + characters.tagCloser;
    var start = content.indexOf(mathTagBegin);
    var end = 0;
    var mathml, startAnnotation, closeAnnotation;

    while (start != -1) {
        output += content.substring(end, start);
        end = content.indexOf(mathTagEnd, start);

        if (end == -1) {
            end = content.length - 1;
        }
        else {
            end += mathTagEnd.length;
        }

        mathml = content.substring(start, end);

        output += wrs_getLatexFromMathML(mathml);

        start = content.indexOf(mathTagBegin, end);
    }

    output += content.substring(end, content.length);
    return output;
}
function wrs_getLatex(code) {
    return wrs_parseRawMathmlToLatex(code, _wrs_xmlCharacters);
}

末了,为了方便获取,可以将latex放到_current_latex变量里:

    // 获取数据
    editor.on('getData', function (e) {
        e.data.dataValue = wrs_endParse(e.data.dataValue || "");
        _current_latex = wrs_getLatex(e.data.dataValue || "");
    });

再简单修改下网页,显示latex:

收官!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏GIS讲堂

OpenLayers3基础教程——加载资源

你可以在OL官网去下载,下载地址为http://openlayers.org/download/,也可以去我的百度云盘下载,下载地址为http://pan.ba...

623
来自专栏施炯的IoT开发专栏

《101 Windows Phone 7 Apps》读书笔记-Trombone

课程内容 Ø Sound Manipulation Ø Sound Looping Ø SoundEffectInstance     相对于前一章的C...

1787
来自专栏朱慕之的博客

UIWebView与JS的交互

要实现这样一个需求:按照本地的CSS文件展示一串网络获取的带HTML格式的只有body部分的文本,需要自己拼写完整的HTML。除此之外,还需要禁用获取的HTML...

721
来自专栏网络

ASLRay:一个可以绕过ASLR的工具

ASLR(Address Space Layout Randomization,即地址空间格局随机化)是指利用随机方式配置数据地址,一般现代系统中都加设这一机制...

20310
来自专栏高性能分布式系统设计

如何把Go调用C的性能提升10倍?

目前,当Go需要和C/C++代码集成的时候,大家最先想到的肯定是CGO。毕竟是官方的解决方案,而且简单。 但是CGO是非常慢的。因为CGO其实一个桥接器,通过自...

3876
来自专栏撸码那些事

最佳编码实践——单一职责原则

同时应用这些最佳实践,可以提升代码适应变更的能力。但是凡事要有度,过度使用虽然可以让代码有很高的自适应能力,但是会导致层次粒度过小而难以理解或使用,还会影响代码...

956
来自专栏FreeBuf

ASLRay:一个可以绕过ASLR的工具

ASLR(Address Space Layout Randomization,即地址空间格局随机化)是指利用随机方式配置数据地址,一般现代系统中都加设这一机制...

2078
来自专栏码字搬砖

JVM内存模型

先磨磨肩擦擦掌,小二很早就听说jvm的内存很是奇特,今日一看果然不同凡响。下面且听小二一一道来。

1125
来自专栏开源FPGA

基于SDRAM的视频图像采集系统

       本文是在前面设计好的简易SDRAM控制器的基础上完善,逐步实现使用SDRAM存储视频流数据,实现视频图像采集系统,CMOS使用的是OV7725。

820
来自专栏面朝大海春暖花开

vue页面开发遇到的坑,都是泪!src属性,freemarker取值

效果图如下 对应的连接 http://www.xinghengedu.com/getTenActivityQuestions.jspx 可以玩一玩。

1233

扫码关注云+社区