Demo: Live server / dev loop

This commit is contained in:
Tony Narlock
2021-05-03 13:48:14 -05:00
parent 9190b2b68b
commit c1ac67b4c4
4 changed files with 152 additions and 2 deletions

19
demo/app.js Normal file
View File

@@ -0,0 +1,19 @@
import ClassicEditor from "@ckeditor/ckeditor5-editor-classic/src/classiceditor";
import Essentials from "@ckeditor/ckeditor5-essentials/src/essentials";
import Paragraph from "@ckeditor/ckeditor5-paragraph/src/paragraph";
import Bold from "@ckeditor/ckeditor5-basic-styles/src/bold";
import Italic from "@ckeditor/ckeditor5-basic-styles/src/italic";
import Math from "../src/math";
ClassicEditor.create(document.querySelector("#editor"), {
plugins: [Essentials, Paragraph, Bold, Italic, Math],
toolbar: ["bold", "italic", "math"],
math: { engine: "katex" },
})
.then((editor) => {
console.log("Editor was initialized", editor);
})
.catch((error) => {
console.error(error.stack);
});

55
demo/index.html Normal file
View File

@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>CKEditor5 w/ ckeditor5-math</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
defer
src="https://cdn.jsdelivr.net/npm/katex@0.13.5/dist/katex.min.js"
integrity="sha384-z64WtjpyrKFsxox9eI4SI8eM9toXdoYeWb5Qh+8PO+eG54Bv9BZqf9xNhlcLf/sA"
crossorigin="anonymous"
></script>
<script
defer
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);"
></script>
<style>
html {
text-align: center;
}
body {
max-width: 500px;
margin: 0 auto;
}
</style>
</head>
<body>
<h2>
CKEditor 5 with
<a
href="https://github.com/isaul32/ckeditor5-math"
rel="noopener noreferrer"
target="_blank"
>ckeditor5-math</a
>
</h2>
<div id="editor">
<p><script type="math/tex">e=mc^2</script></p>
<p><script type="math/tex; mode=display">e=mc^2</script></p>
</div>
</body>
</html>