ckeditor + wiris MathType not parsing math ml in edit mode

Question

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

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.

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.

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

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

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

What I am doing wrong?

[https://stackoverflow.com/a/68264617/4822193](https://stackoverflow.com/a/68264617/4822193) This could be a possible solution to your question. The MathML parse function needs to be triggered on content changes (possibly with a watcher). — Apoorv Pal, Jul 22 '21 at 06:43

score 1 · Answer 1 · answered Apr 22 '21 at 09:56

Actually, when the equation is inserted into the CKEditor, it will only keep the MathML xml.
The image that you see is a hot rendering from MathML xml into an SVG image.
When you save the data to DB, the CKEditor will only save the MathML XML.

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

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 not parsing math ml in edit mode

1 Answers1

Linked