0

在 out spring 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'} );

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

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

我做错了什么？

4

1 回答 1

1

  • 实际上，当方程插入 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 Container 中显示它（Div/Li...等）

于 2021-04-22T09:56:34.843 回答