ckeditor + wiris MathType 在编辑模式下不解析数学 ml

问题描述

在春季 MVC 项目中，我将 wiris MathType 与用于数学和化学方程式的 ckeditor 集成在一起。整合过程顺利而迅速。

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

问题是当打开页面编辑数据时，方程没有被解析，看起来 ckeditor 正在删除所有 MathML xml 并只显示方程的数据。

我是初始化。带有 wiris 插件的 ckeditor 如下：

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 来演示这个问题。

预期输出是：分配给 textarea 的 MathML 应该被解析为数学方程。

我做错了什么？

解决方法

实际上，当方程被插入到CKEditor中时，它只会保留MathML xml。
您看到的图像是从 MathML xml 到 SVG 图像的热渲染。
当您将数据保存到 DB 时，CKEditor 只会保存 MathML XML。

当您从数据库中检索数据时，您应该检测“MathML xml”并使用此 URL 将其呈现为 SVG 图像：

   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...等）中显示它

https://stackoverflow.com/a/68264617/4822193

这可能是您问题的可能解决方案。 MathML 解析函数需要在内容更改时触发（可能使用观察者）。

ckeditor ckeditor ckeditor javascript wiris