// Math
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CKEditor 5 classic example with math plugin</title>
</head>
<body>
<h1>CKEditor 5 – classic editor build</h1>
<h2>Math plugin – MathJax demo</h2>
<h2>Example TeX equations</h2>
<b>Math</b>
<pre>x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}</pre>
<b>Chem</b>
<pre>\ce{CH4 + 2 O2 -> CO2 + 2 H2O}</pre>
<h2>Paste from text</h2>
<b>Display</b>
<pre>\[ x=\frac{-b\pm\sqrt{b^2-4ac}}{2a} \]</pre>
<b>Inline</b>
<pre>\( x+\sqrt{1-x^2} \)</pre>
<h2>Editor</h2>
<div id="editor" placeholder="Type the content here!">
<p>Lorem... <span class="math-tex"> \(x=\frac{-b\pm\sqrt{b^2-4ac}}{2a} \) </span> ...ipsum</p>
<p>Lorem... <span class="math-tex"> \[ x=\frac{-b\pm\sqrt{b^2-4ac}}{2a} \] </span> ...ipsum</p>
<p>Lorem... <script type="math/tex">x+\sqrt{1-x^2}</script> ...ipsum</p>
<p>Lorem... <script type="math/tex; mode=display">x+\sqrt{1-x^2}</script> ...ipsum</p>
</div>
<h2>Preview</h2>
<div id="editor-preview"></div>
<h2>Data</h2>
<pre id="editor-preview-html" style="word-wrap: break-word; white-space: pre-wrap;"></pre>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.6/MathJax.js?config=TeX-MML-AM_CHTML"></script>
<script>
MathJax.Ajax.config.path["mhchem"] = "https://cdnjs.cloudflare.com/ajax/libs/mathjax-mhchem/3.3.2";
MathJax.Hub.Config({
showMathMenu: false,
TeX: {
extensions: [ "[mhchem]/mhchem.js" ]
},
messageStyle: "none",
tex2jax: {
preview: "none"
}
});
</script>
<script src="https://cdn.jsdelivr.net/gh/isaul32/ckeditor5@c3463fe834049bf5d805d1d22402108a9c0576bd/packages/ckeditor5-build-classic/build/ckeditor.js"></script>
<script>
function getEditorData() {
const data = window.ckeditor.getData();
// HTML
const preview = document.getElementById('editor-preview');
preview.innerHTML = data;
MathJax.Hub.Queue(["Typeset", MathJax.Hub, preview]); // MathJax 2
// Text
document.getElementById('editor-preview-html').innerText = data;
}
ClassicEditor.create(document.querySelector('#editor'), {
math: {
engine: 'mathjax',
outputType: 'script',
forceOutputType: false,
enablePreview: true
}
})
.then(editor => {
window.ckeditor = editor;
getEditorData();
editor.model.document.on('change:data', () => {
getEditorData();
});
})
.catch(err => {
console.error(err);
});
</script>
</body>
</html>