mirror of https://github.com/TriliumNext/Notes
Demo: Live server / dev loop
Tony Narlock
parent
9190b2b68b
commit
c1ac67b4c4
@ -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);
|
||||||
|
});
|
||||||
@ -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>
|
||||||
@ -0,0 +1,66 @@
|
|||||||
|
const path = require("path");
|
||||||
|
const { styles } = require("@ckeditor/ckeditor5-dev-utils");
|
||||||
|
const HtmlWebpackPlugin = require("html-webpack-plugin");
|
||||||
|
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
// https://webpack.js.org/configuration/entry-context/
|
||||||
|
entry: "./demo/app.js",
|
||||||
|
|
||||||
|
// https://webpack.js.org/configuration/output/
|
||||||
|
output: {
|
||||||
|
path: path.resolve(__dirname, "dist"),
|
||||||
|
filename: "bundle.js",
|
||||||
|
},
|
||||||
|
|
||||||
|
devServer: {
|
||||||
|
disableHostCheck: true,
|
||||||
|
headers: {
|
||||||
|
"Access-Control-Allow-Origin": "*",
|
||||||
|
},
|
||||||
|
historyApiFallback: true,
|
||||||
|
hot: true,
|
||||||
|
inline: true,
|
||||||
|
index: "./demo/index.html",
|
||||||
|
},
|
||||||
|
|
||||||
|
plugins: [
|
||||||
|
new MiniCssExtractPlugin(),
|
||||||
|
new HtmlWebpackPlugin({
|
||||||
|
template: "./demo/index.html",
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
|
||||||
|
use: ["raw-loader"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
|
||||||
|
use: [
|
||||||
|
MiniCssExtractPlugin.loader,
|
||||||
|
"css-loader",
|
||||||
|
{
|
||||||
|
loader: "postcss-loader",
|
||||||
|
options: styles.getPostCssConfig({
|
||||||
|
themeImporter: {
|
||||||
|
themePath: require.resolve(
|
||||||
|
"@ckeditor/ckeditor5-theme-lark"
|
||||||
|
),
|
||||||
|
},
|
||||||
|
minify: true,
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
// Useful for debugging.
|
||||||
|
devtool: "source-map",
|
||||||
|
|
||||||
|
// By default webpack logs warnings if the bundle is bigger than 200kb.
|
||||||
|
performance: { hints: false },
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue