|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<link rel="icon" type="image/png" href="https://ckeditor.com/docs/ckeditor5/latest/assets/img/favicons/32x32.png" sizes="32x32">
|
|
|
<meta charset="utf-8">
|
|
|
<title>CKEditor 5 with ckeditor5-math – Development Sample</title>
|
|
|
<link
|
|
|
rel="stylesheet"
|
|
|
href="https://cdn.jsdelivr.net/npm/katex@0.13.5/dist/katex.min.css"
|
|
|
integrity="sha384-L+Gq2Cso/Y2x8fX4wausgiZT8z0QPZz7OqPuz4YqAycQJyrJT9NRLpjFBD6zlOia"
|
|
|
crossorigin="anonymous"
|
|
|
/>
|
|
|
<script
|
|
|
src="https://cdn.jsdelivr.net/npm/katex@0.13.5/dist/katex.min.js"
|
|
|
integrity="sha384-z64WtjpyrKFsxox9eI4SI8eM9toXdoYeWb5Qh+8PO+eG54Bv9BZqf9xNhlcLf/sA"
|
|
|
crossorigin="anonymous"
|
|
|
></script>
|
|
|
<script
|
|
|
src="https://cdn.jsdelivr.net/npm/katex@0.13.5/dist/contrib/auto-render.min.js"
|
|
|
integrity="sha384-vZTG03m+2yp6N6BNi5iM4rW4oIwk5DfcNdFfxkk9ZWpDriOkXX8voJBFrAO7MpVl"
|
|
|
crossorigin="anonymous"
|
|
|
onload="renderMathInElement(document.body, {'macros': {'\\test': '\\mathrel{\\char`≠}'}});"
|
|
|
></script>
|
|
|
<style>body { max-width: 800px; margin: 20px auto; }</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
|
|
|
<h1>CKEditor 5 with ckeditor5-math – Development Sample</h1>
|
|
|
|
|
|
<div id="editor">
|
|
|
<h2>Development environment</h2>
|
|
|
<p>
|
|
|
This is a demo of the <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#classic-editor">classic editor build</a> that loads the <code>Math</code> and <code>AutoformatMath</code> plugin.
|
|
|
</p>
|
|
|
<p>
|
|
|
<code>Math</code> inserts mathematical formulas into the editor. You can click the CKEditor 5 Math icon in the toolbar and see the results.
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
|
<script type="math/tex">e=mc^2</script>
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
|
<script type="math/tex; mode=display">e=mc^2</script>
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
|
This should show "\test" as ≠ via katexRenderOptions.macros:
|
|
|
<script type="math/tex">\test</script>
|
|
|
</p>
|
|
|
|
|
|
<!-- Quill Style Tag -->
|
|
|
<p>
|
|
|
<span class="ql-formula" data-value="e=mc^2"></span>
|
|
|
</p>
|
|
|
|
|
|
<h3>The directory structure</h3>
|
|
|
|
|
|
<p>
|
|
|
The code snippet below presents the directory structure.
|
|
|
</p>
|
|
|
|
|
|
<pre><code class="language-plaintext">.
|
|
|
├─ sample
|
|
|
│ ├─ dll.html # The editor initialized using the DLL builds. Check README for details.
|
|
|
│ ├─ index.html # The currently displayed file.
|
|
|
│ └─ ckeditor.js # The editor initialization script.
|
|
|
├─ src
|
|
|
│ ├─ autoformatmath.js # The AutoformatMath plugin.
|
|
|
│ ├─ math.js # The Math plugin.
|
|
|
│ ├─ index.js # The modules exported by the package when using the DLL builds.
|
|
|
│ └─ **/*.js # JavaScript source files.
|
|
|
├─ tests
|
|
|
│ └─ **/*.js # Test files
|
|
|
├─ theme
|
|
|
│ ├─ icons
|
|
|
│ │ ├─ math.svg # The Math icon displayed in the toolbar.
|
|
|
│ └─ mathform.css # Math editor styles.
|
|
|
├─ .editorconfig
|
|
|
├─ ...
|
|
|
└─ README.md</code></pre>
|
|
|
|
|
|
<h3>Reporting issues</h3>
|
|
|
<p>If you found a problem with CKEditor 5 or the package generator, please, report an issue:</p>
|
|
|
<p><a href="https://github.com/isaul32/ckeditor5-math/issues">CKEditor 5 Math</a></p>
|
|
|
</div>
|
|
|
|
|
|
<script src="./ckeditor.dist.js"></script>
|
|
|
</body>
|
|
|
</html>
|