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"><p>This is some <strong>sample text</strong>. You are using <a href="https://ckeditor.com/">CKEditor</a>.</p></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.
精彩评论