Latex formula online visual editor

Seek

A recent demo needs to use the online editor of latex formula, which is generally similar from search engines http://latex.codecogs.com/eqneditor/editor.php As a result, the problem with this editor is that the use cost is high and the interface is not beautiful.

Continue to explore and discover the wiris editor:

MathML and latex are supported:

That's it!

model selection

First of all, we will not use this editor directly, but only when editing formulas, so we should select the appropriate version.

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

However, the support for latex in the CK version of wiris is non visual. Enter latex in the editor or display it as latex:

Move the focus to the inside of $$and click the button to display the formula editor of wiris:

Adaptation

After a simple trial, you can find that if you directly use the formula editor to insert a formula, it will be displayed visually:

You can see that when saving, MathML is:

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

In the case of latex input:

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

The original problem here is that it is the difference in MathML that leads to the difference in processing. That is, MathML without latex is generated at the beginning, and then put into the editor. Simply look at the code and you can see that WRS is called first_ Endparse, WRS_ Just 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);
	});

Visual display is no problem, but how can MathML be converted to latex? core. WRS in JS_ The parsemathmltolatex function directly converts... Extract the contents of:

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;
        }
   ......
}

But the current MathML does not contain this information. How to deal with it? Check the official document and find that there is a mathml2latex service. Check the official JAVA demo. The servlet does not contain this service, but there is code in the jar package, so you can package a servlet yourself:

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, call this service:

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 can only convert one MathML to latex. For the content in the editor, MathML needs to be extracted and converted one by one:

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);
}

Finally, for ease of access, you can put latex in_ current_ In the latex variable:

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

Simply modify the web page to display latex:

End!