CODEWITHSUNDEEP
javascriptjqueryhtmljquery-ui
luongkhanh
luongkhanh

Reputation: 1823

How to display correct format of math formular in ckeditor

I'm facing about the problem how to display correct format of match formula in ckeditor, I have tried to search a lot of ways but it seem can not..

This is my sources: 

<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script src="https://cdn.ckeditor.com/4.7.3/standard/ckeditor.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/x-mathjax-config">MathJax.Hub.Config({tex2jax: {inlineMath: [['\\(','\\)']]}});</script>     

<script type="text/javascript">
    $(function(){
    init();
    });
</script>

<script language="javascript">
    function init()
    {
        var strArea = "";            
        strArea += "<table border='0' cellpadding='0' cellspacing='0' align='left' valign='top' width='100%' id='contents2'>";

        strArea += "<tr><td>";
        strArea += "<table border='0' cellpadding='0' cellspacing='0' align='left' valign='top' width='100%'>";
        strArea += "<tr><td height='20'></td></tr><tr><td>"; 
        strArea += "<table border='3' cellpadding='0' cellspacing='0' align='left' valign='top'>";
        strArea += "<tr>";
        strArea += "<td width='20' valign='top' style='line-height:2.1'><div id='quizno'>\(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)</div></td>";
        strArea += "<td width='5'></td>";
        strArea += "<td style='line-height:2.1'><H1><div id='quiz'>aaaa</div></H1></td>";
        strArea += "</tr>";
        strArea += "</table></td></tr>";
        strArea += "<tr><td height='7'>bbb</td></tr><tr><td>"; 
        strArea += "<table border='1' cellpadding='0' cellspacing='0' align='left' valign='top'>";
        strArea += "</table></td></tr></table></td></tr>";          
        strArea += "</table></td></tr></table>";
        document.all.quizdiv.innerHTML = strArea;
        // CKEDITOR.instances.ir4.getData()
        // CKEDITOR.instances.quizdiv.getData(document.getElementById('quizdiv').innerHTML) = strArea;          
    }       
    </script>    
    </head>
   <body>   
     <div style="overflow: auto; height: 700; width: 100%" id="centerdiv">
     <div id="quizdiv" style="width: 100%;"></div>                                      
 </div>
 </body>
 </html>

I try to display with default text of math formula is: (x = {-b \pm \sqrt{b^2-4ac} \over 2a}) but is not correct display

enter image description here

How to display correct format of math formula? thanks..

Upvotes: 0

Views: 308

Answers (1)

A. Iglesias
A. Iglesias

Reputation: 2675

I've found different problems...

  1. CKEditor has to be applied to a textarea...

    <textarea id="quizdiv" style="width: 100%;"></textarea>

  2. You have to use the standard-all version of CKEditor instead of the standard, because the standard doesn't include the extra pluggins...

    <script src="https://cdn.ckeditor.com/4.7.3/standard-all/ckeditor.js"></script>

  3. You have to configure the CKEDITOR.config.extraPlugins and CKEDITOR.config.mathJaxLib...

    CKEDITOR.config.extraPlugins = 'mathjax';
CKEDITOR.config.mathJaxLib = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML';

  4. You have to put the formulas inside of a <span class='math-tex'>...

    <span class="math-tex">\(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)</span>

  5. You're creating the formula inside of a string, so you have to escape the '\' characters to make them appear in the string so the plugin can read them...

    strArea += "<td width='50%' valign='top' style='line-height:2.1'><span class='math-tex'>\\(x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}\\)</span></td>";

Here you have a working file...

https://fiddle.jshell.net/rigobauer/3qgeL5ae/

I hope it helps

Upvotes: 1

Related Questions