Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-11-04 15:11:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

Demo: Live server / dev loop

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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>

14
package.json
View File

@ -20,16 +20,25 @@
"@ckeditor/ckeditor5-widget": "^27.1.0" "@ckeditor/ckeditor5-widget": "^27.1.0"
}, },
"devDependencies": { "devDependencies": {
"@ckeditor/ckeditor5-basic-styles": "^27.1.0",
"@ckeditor/ckeditor5-dev-tests": "^24.4.2", "@ckeditor/ckeditor5-dev-tests": "^24.4.2",
"@ckeditor/ckeditor5-editor-inline": "^27.1.0", "@ckeditor/ckeditor5-editor-inline": "^27.1.0",
"@ckeditor/ckeditor5-essentials": "^27.1.0", "@ckeditor/ckeditor5-essentials": "^27.1.0",
"@ckeditor/ckeditor5-paragraph": "^27.1.0", "@ckeditor/ckeditor5-paragraph": "^27.1.0",
"@ckeditor/ckeditor5-theme-lark": "^27.1.0",
"css-loader": "^5.2.4",
"eslint": "^7.1.0", "eslint": "^7.1.0",
"eslint-config-ckeditor5": "^3.1.0", "eslint-config-ckeditor5": "^3.1.0",
"html-webpack-plugin": "^5.3.1",
"husky": "^4.2.5", "husky": "^4.2.5",
"lint-staged": "^10.2.6", "lint-staged": "^10.2.6",
"mini-css-extract-plugin": "^1.6.0",
"raw-loader": "^4.0.2",
"stylelint": "^13.5.0", "stylelint": "^13.5.0",
"stylelint-config-ckeditor5": "^2.0.1" "stylelint-config-ckeditor5": "^2.0.1",
"webpack": "^5.36.2",
"webpack-cli": "^4.6.0",
"webpack-dev-server": "^3.11.2"
}, },
"engines": { "engines": {
"node": ">=12.0.0", "node": ">=12.0.0",
@ -51,7 +60,8 @@
"lint": "eslint --quiet src/**/*.js", "lint": "eslint --quiet src/**/*.js",
"lint:fix": "eslint --quiet src/**/*.js --fix", "lint:fix": "eslint --quiet src/**/*.js --fix",
"stylelint": "stylelint --quiet --allow-empty-input 'theme/**/*.css' 'docs/**/*.css'", "stylelint": "stylelint --quiet --allow-empty-input 'theme/**/*.css' 'docs/**/*.css'",
"test": "node node_modules/@ckeditor/ckeditor5-dev-tests/bin/test.js" "test": "node node_modules/@ckeditor/ckeditor5-dev-tests/bin/test.js",
"start": "node node_modules/.bin/webpack serve --mode development"
}, },
"lint-staged": { "lint-staged": {
"**/*.js": [ "**/*.js": [

66
webpack.config.js Normal file
View File

@ -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 },
};