Question

我正在尝试在ckeditor中添加数学公式，从编辑器应该收集整个信息（包括公式）显示在不同div的同一页面上。

当我使用以下方法时，它将数学公式显示为文本（不格式化为公式）。

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

Answer 1

在HTML中使用Katex而不是Mathjax进行数学公式渲染更快，更容易。供参考（katex和乳胶的比较）： https://www.intmath.com/cg5/katex-mathjax-comparison.php

因此，使用katex的解决方案将是：

<!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/katex@0.10.0-beta/dist/katex.min.css" integrity="sha384-9tPv11A+glH/on/wEu99NVwDPwkMQESOocs/ZGXPoIiLE8MU/qkqUcZ3zzL+6DuH"
    crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.js" integrity="sha384-U8Vrjwb8fuHMt6ewaCy8uqeUXv4oitYACKdB0VziCerzt011iQ/0TqlSlv8MReCm"
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/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>

祝你好运！

CKEditor数学公式渲染目标div

1 个答案: