CODEWITHSUNDEEP
ckeditor
Lakshman Miani
Lakshman Miani

Reputation: 344

CKEditor math formula rendering on target div

I am trying to add math formula in ckeditor, from editor should collect entire information(including formula) display on the same page in different div.

When I do with the following approach it is displaying math formula as text(not formatting as formula).

<html>
<head>
<script src="https://cdn.ckeditor.com/4.8.0/full-all/ckeditor.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML"></script>
    <script>
     function onSubmit(){
        var data = CKEDITOR.instances.editor1.getData()    
         document.getElementById("show").innerHTML=data
    }
</script>
</head>
<body>

<form action="#" >
<textarea rows="20" cols="70" class="ckeditor" id="editor1" name="test1">   
</textarea>
 <input type="button" value="save" onclick="onSubmit()" >

</form>
<div id="show" id='ed2'></div>        

    <script>

        CKEDITOR.replace( 'editor1', {
            extraPlugins: 'mathjax',
            mathJaxLib: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML',
            height: 320
        } );

        if ( CKEDITOR.env.ie && CKEDITOR.env.version == 8 ) {
            document.getElementById( 'ie8-warning' ).className = 'tip alert';
        }

    </script>
 </body>
 </html>

Upvotes: 1

Views: 1055

Answers (1)

Raj Kumar Khanal
Raj Kumar Khanal

Reputation: 11

It is faster and easier to use Katex rather than Mathjax for math formula rendering in Html. For reference(Comparison between katex and latex ) : https://www.intmath.com/cg5/katex-mathjax-comparison.php

So the solution by using katex will be :

<!DOCTYPE html>

<head>
<script src="https://cdn.ckeditor.com/4.8.0/full-all/ckeditor.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-9tPv11A+glH/on/wEu99NVwDPwkMQESOocs/ZGXPoIiLE8MU/qkqUcZ3zzL+6DuH"
    crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-U8Vrjwb8fuHMt6ewaCy8uqeUXv4oitYACKdB0VziCerzt011iQ/0TqlSlv8MReCm"
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-aGfk5kvhIq5x1x5YdvCp4upKZYnA8ckafviDpmWEKp4afOZEqOli7gqSnh8I6enH"
    crossorigin="anonymous"></script>

<script>
    function onSubmit() {
        var data = CKEDITOR.instances.editor1.getData()
        document.getElementById("show").innerHTML = data
        domChanged();
    }
</script>
</head>

<body>

<form action="#">
    <textarea rows="20" cols="70" class="ckeditor" id="editor1" name="test1">
    </textarea>
    <input type="button" value="save" onclick="onSubmit()">

</form>
<div id="show" id='ed2'></div>
<script>
    CKEDITOR.replace('editor1', {
        extraPlugins: 'mathjax',
        mathJaxLib: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML',
        height: 320
    });

    if (CKEDITOR.env.ie && CKEDITOR.env.version == 8) {
        document.getElementById('ie8-warning').className = 'tip alert';
    }

    function domChanged() {
        renderMathInElement(document.body);
    }
</script>
</body>

</html>

Good luck !!!

Upvotes: 1

Related Questions