Latex 公式在线可视化编辑器

Latex 公式在线可视化编辑器本文介绍定制latex公式在线编辑器

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

寻觅

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

继续探寻,发现了wiris Editor
wiris Editor

支持mathml和latex:
wiris Editor

那么就它了!

选型

首先,我们不会直接使用这个编辑器,只是在编辑公式的时候才使用,所以要选择合适的版本。
wiris Editor
以前用过CKEditor,所以就这它了!选用java版本
我们的数据已经是latex的,在wiris 编辑器显示需要注意latex需要用两个$$包括起来
例如:

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

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

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

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

适配

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

可以看到保存的时候,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);
	});

Latex

直观显示没问题了,但是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:
enter description here

收官!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/166579.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • VS2008安装失败原因!「建议收藏」

    VS2008安装失败原因!「建议收藏」从RTM到现在,我已安装十多回VS2008,发现总会安装OfficeTools的时候,会失败。百思不知其解。后在网上看到,是因为我们使用UltraISO制作激活成功教程的VS2008的时候带出来的问题,主要是Unicode的问题。于是我这个怎么解决呢?我尝试先用deamon打开原版的vs2008,再用untraISO将虚拟盘的所以文件加入新的ISO中,再将激活成功教程的setup.那个文件,加入。重新生成iso

  • 怎样学习工业PLC

    怎样学习工业PLC可编程控制器是集计算机技术、通讯技术、自动控制技术为一体的工业控制装置。对于初学者来说掌握了plc基本原理,熟悉常用的编程方法,在进行简单系统编程时尚可以运用自如,但对较为复杂的控制系统设计往往力不从心,要想在PLC应用方面得心应手,学习者除了要建立正确的学习方法,深入学习plc编程技巧,最重要的是相关知识的学习。下面从六个方面谈谈我的教学心得。一、多收集程序范例、增加编程经验在PLC的编程方…

    2022年10月18日
  • 用友java开发待遇_【北京用友软件工资】java开发工程师待遇-看准网[通俗易懂]

    用友java开发待遇_【北京用友软件工资】java开发工程师待遇-看准网[通俗易懂]电话面试30分钟,主要刚开始问java的一些基础知识,然后开始问数据库,最后问框架。主要具体题目如下:用友技术面试题1.你能说下你使用的java集合有哪些吗?2.你能说下你在做项目中出现了哪些运行时期异常吗?3.ArrayList集合中怎样去除重复元素?4.要比较ArrayList集合中元素的大小,怎样比较?5.==和equals的区别?定义了student类,有age属性,然后a=ne…

  • 作为Java开发,你一定要了解面向对象编程中为什么要使用get和set方法

    一、由一个问题开始在进行面向对象开发中,在编写一个Class的时候,会定义这个Class的属性(字段)为Private,然后去生成对应的get和set方法,通过这样的方式去对属性进行操作,那你有没有思考过为什么要这样做呢?这样做有哪些好处呢?请先自行思考30秒,在看下面的内容。二、回顾相关知识回答这个问题之前,让我们先回顾一些的基础知识:1、访问修饰符,从访问的范围由小及大依次是:pri…

  • windows 10 安装composer问题[通俗易懂]

    windows 10 安装composer问题[通俗易懂]选择手动安装composerhttps://getcomposer.org/download/我选的1.10.0版本

  • windows10安装cuda anaconda_电脑自带cuda吗

    windows10安装cuda anaconda_电脑自带cuda吗cuda10.2安装前言下载cuda10.2和cudnn查看本机驱动版本安装过程安装cudnn验证前言tensorflow1.12之后gpu使用cuda10.0对应的驱动,不要求安装cuda,[但pytorch要求安装cuda和cudnn(暂不确定)],如果本机的驱动版本小于cuda10.0对应的驱动版本,建议安装cuda10.x的驱动来覆盖本机的驱动,不用卸载再安装驱动下载cuda10.2…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号