CODEWITHSUNDEEP
javascriptckeditorwiris
Amogh
Amogh

Reputation: 4573

ckeditor + wiris MathType not parsing math ml in edit mode

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?

Upvotes: 0

Views: 2024

Answers (1)

Ammar Al-Habib
Ammar Al-Habib

Reputation: 99

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

Upvotes: 1

Related Questions