开发者

how to use wiris with ckeditor in a webpage

I am trying to use this code to add Math equations, formulas to a webpage:

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="robots" content="noindex, nofollow">
  <title>Classic editor with default styles</title>
  <script charset="utf-8" src="ckeditor/ckeditor.js" type="text/javascript"></script>开发者_C百科
</head>

<body>
  <textarea cols="80" id="contents" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href=&quot;https://ckeditor.com/&quot;&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
  
  <div id="contents_preview"></div>

<script type='text/javascript'>

CKEDITOR.on('instanceCreated', function (e) {
    document.getElementById( e.editor.name + '_preview').innerHTML = e.editor.getData();
    e.editor.on('change', function (ev) {
        document.getElementById( ev.editor.name + '_preview').innerHTML = ev.editor.getData();
        Print.postMessage(ev.editor.getData());
    });
});
    
    var mathElements = [
        'math',
        'maction',
        'maligngroup',
        'malignmark',
        'menclose',
        'merror',
        'mfenced',
        'mfrac',
        'mglyph',
        'mi',
        'mlabeledtr',
        'mlongdiv',
        'mmultiscripts',
        'mn',
        'mo',
        'mover',
        'mpadded',
        'mphantom',
        'mroot',
        'mrow',
        'ms',
        'mscarries',
        'mscarry',
        'msgroup',
        'msline',
        'mspace',
        'msqrt',
        'msrow',
        'mstack',
        'mstyle',
        'msub',
        'msup',
        'msubsup',
        'mtable',
        'mtd',
        'mtext',
        'mtr',
        'munder',
        'munderover',
        'semantics',
        'annotation',
        'annotation-xml',
        'mprescripts',
        'none'
    ];

CKEDITOR.plugins.addExternal('ckeditor_wiris', '../node_modules/@wiris/mathtype-ckeditor4/', 'plugin.js');
    
var config = {  height: 260,
      width: 700,
      removeButtons: 'PasteFromWord',
      extraPlugins: 'onchange,ckeditor_wiris',
                allowedContent: true,};
    
//CKEDITOR.replace('contents', config);

    CKEDITOR.replace('contents', { //eslint-disable-line
   extraPlugins: 'ckeditor_wiris',
   // Allow MathML content.
   allowedContent: true,
   toolbar: [
      { name: 'wirisplugins', items: ['ckeditor_wiris_formulaEditor', 'ckeditor_wiris_formulaEditorChemistry'] },
      // To avoid errors and have mathtype fully functional
      { name: 'others' },
   ],
   // language: 'de',
   // mathTypeParameters: {
   //   editorParameters: { language: 'es' }, // MathType config, including language
   // },
});

</script>
  

</body>

</html>

but when I click on the wiris_formulaEditor nothing happens. What am I doing wrong. Any idea to make it work? Thanks.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜