ckeditor + wiris MathType未在编辑模式下解析数学ml [英] ckeditor + wiris MathType not parsing math ml in edit mode

问题描述

在春季MVC项目中，我将wiris MathType与ckeditor集成为数学和化学方程式.集成可以快速，顺利地完成.

In out spring MVC project I have integrated wiris MathType with ckeditor for math and chemical equations. Integration is done smoothly and quickly.

创建数据后，我可以从ckeditor获取MathML xml并将其保存到数据库中.为了编辑数据，我正在从数据库中加载数据并将其绑定到textarea，以便用户可以修改方程式.

Upon data creation I am able to get MathML xml from ckeditor and saving it into database. To edit data I am loading the data from database and binding it to textarea so that user can modify the equation.

问题是当打开页面以编辑未解析方程式的数据时，好像ckeditor删除了所有MathML xml并仅显示方程式的数据.

Problem is when the page is opened to edit the data the equation is not getting parsed, it looks like ckeditor is removing all the MathML xml and shows only data of the equation.

我是init.带有wiris插件的ckeditor如下:

I am init. ckeditor with wiris plugin as below:

CKEDITOR.plugins.addExternal('ckeditor_wiris', 'https://www.wiris.net/demo/plugins/ckeditor/', 'plugin.js');
  
CKEDITOR.editorConfig = function (config) 
{
    config.toolbar = [
             {name: 'wirisplugins', items: ['ckeditor_wiris_formulaEditor', 'ckeditor_wiris_formulaEditorChemistry']}
           ];
    config.allowedContent = true;
};
       
CKEDITOR.replace( 'mathml', {extraPlugins: 'ckeditor_wiris'} );

我还在这里 https://jsfiddle.net/vgr47y8n/2/创建了一个jsfiddle演示问题.

I have also created a jsfiddle here https://jsfiddle.net/vgr47y8n/2/ to demonstrate the problem.

预期输出是:应该将分配给textarea的MathML解析为数学方程式.

Expected output is: MathML assigned to textarea should get parsed into math equation.

我做错了什么?

推荐答案

• 实际上，将方程式插入CKEditor时，只会保留MathML xml.

  • Actually, when the equation is inserted into the CKEditor, it will only keep the MathML xml.

    您看到的图像是从MathML xml到SVG图像的热渲染.

    The image that you see is a hot rendering from MathML xml into an SVG image.

    将数据保存到DB时，CKEditor将仅保存MathML XML.

    When you save the data to DB, the CKEditor will only save the MathML XML.

    从数据库中检索数据时，应检测到"MathML xml"并使用以下URL将其呈现为SVG图像:

    When you retrieve the data from the DB, you should detect the 'MathML xml' and render it as an SVG image using this URL:

       var renderURL = "https://www.wiris.net/demo/editor/render";
    
    
    
    $.post(renderURL, { format: "svg", mml: mmlEquation }, function (rd) {
      var img = document.createElement("IMG");
        if ($.trim(rd)) {
                              if (rd.documentElement) {
                                  var svg = rd.documentElement;
                                  var svgImageXml = (new XMLSerializer).serializeToString(svg);
                                  var svgAsDataSrc = "data:image/svg+xml;base64," +btoa(unescape(encodeURIComponent(svgImageXml)));
                                  img.setAttribute("class", "Wirisformula-equ");
                                  img.setAttribute("align", "middle");
                                  img.setAttribute("data-equationType", eqType);
                                  img.setAttribute("src", svgAsDataSrc);
                                  img.setAttribute("data-mathml", mmlEquation);
                                  img.setAttribute("alt", "");
                              }
                          }
      }
    

  • 请确保您无法在文本区域中显示方程式，但是可以在CKEditor或HTML容器(Div/Li ...等)中显示方程式

  • Be sure that you are not able to show the equation in the text area, but you can show it in the CKEditor or inside HTML Container (Div/Li...etc)

    这篇关于ckeditor + wiris MathType未在编辑模式下解析数学ml的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！