build ckeditor from scratch

_scripts/build_ckeditor.sh

@@ -0,0 +1,48 @@
+#!/bin/bash
+WORK_DIR="$1";
+REPO_DIR="$2";
+DEST_DIR="$3";
+
+cd "$REPO_DIR";
+
+cp "$WORK_DIR/ckeditor"/* .;
+
+npm install --save \
+	css-loader@5 \
+	postcss-loader@4 \
+	raw-loader@4 \
+	style-loader@2 \
+	webpack@5 \
+	webpack-cli@4
+
+npm install --save \
+	@ckeditor/ckeditor5-dev-utils \
+	@ckeditor/ckeditor5-editor-classic \
+	@ckeditor/ckeditor5-alignment \
+	@ckeditor/ckeditor5-autoformat \
+	@ckeditor/ckeditor5-basic-styles \
+	@ckeditor/ckeditor5-block-quote \
+	@ckeditor/ckeditor5-code-block \
+	@ckeditor/ckeditor5-essentials \
+	@ckeditor/ckeditor5-font \
+	@ckeditor/ckeditor5-heading \
+	@ckeditor/ckeditor5-horizontal-line \
+	@ckeditor/ckeditor5-html-embed \
+	@ckeditor/ckeditor5-image \
+	@ckeditor/ckeditor5-indent \
+	@ckeditor/ckeditor5-link \
+	@ckeditor/ckeditor5-list \
+	@ckeditor/ckeditor5-media-embed \
+	@ckeditor/ckeditor5-paragraph \
+	@ckeditor/ckeditor5-show-blocks \
+	@ckeditor/ckeditor5-source-editing \
+	@ckeditor/ckeditor5-special-characters \
+	@ckeditor/ckeditor5-table \
+	@ckeditor/ckeditor5-typing \
+	@ckeditor/ckeditor5-theme-lark
+
+./node_modules/.bin/webpack --mode production;
+
+
+cp dist/ckeditor.js "$DEST_DIR/ckeditor.js";
+cd "$WORK_DIR";

_scripts/build_codemirror.sh

@@ -0,0 +1,9 @@
+#!/bin/bash
+WORK_DIR="$1";
+REPO_DIR="$2";
+DEST_DIR="$3";
+
+cd "$REPO_DIR";
+npm install;
+cp -rv lib "$DEST_DIR";
+cd "$WORK_DIR";

_scripts/pull.sh

@@ -10,7 +10,6 @@ LICENSE_PATH="/_license";
 GIT_PHPMAILER="https://github.com/PHPMailer/PHPMailer";
 GIT_CODEMIRROR="https://github.com/codemirror/codemirror5";
 URL_JQUERY="https://code.jquery.com/jquery-3.7.1.min.js";
-URL_CKEDITOR="https://cdn.ckeditor.com/ckeditor5/41.4.2/classic/ckeditor.js";
 
 LICENSE_PHPMAILER="https://raw.githubusercontent.com/PHPMailer/PHPMailer/master/LICENSE";
 LICENSE_JQUERY="https://raw.githubusercontent.com/jquery/jquery/main/LICENSE.txt";
@@ -41,19 +40,21 @@ cp -rv "$REPOS_DIR/phpmailer/src"/* "$WORK_DIR$LIB_PATH/PHPMailer"
 
 which npm;
 if [[ $? -gt 0 ]]; then
-	echo "WARNING: npm isn't installed; can't build codemirror";
+	echo "WARNING: npm isn't installed; can't build codemirror and ckeditor";
 else
-
 	echo "Pulling CodeMirror";
 	mkdir "$REPOS_DIR/codemirror";
 	git clone "$GIT_CODEMIRROR" "$REPOS_DIR/codemirror";
-	cd "$REPOS_DIR/codemirror";
+
-	npm install;
+	echo "Building CodeMirror";
-	cp -rv lib "$WORK_DIR$MEDIALIB_PATH/codemirror";
+	"$WORK_DIR/_scripts/build_codemirror.sh" "$WORK_DIR" "$REPOS_DIR/codemirror" "$WORK_DIR$MEDIALIB_PATH/codemirror";
-	cd "$WORK_DIR";
+
+	mkdir "$REPOS_DIR/ckeditor";
+	echo "Building CKEditor";
+	"$WORK_DIR/_scripts/build_ckeditor.sh" "$WORK_DIR" "$REPOS_DIR/ckeditor" "$WORK_DIR$MEDIALIB_PATH/ckeditor";
 fi
 
-echo "Downloading jQuery, CKEditor";
+echo "Downloading jQuery";
 mkdir "$WORK_DIR$MEDIALIB_PATH/jquery";
 wget -O "$WORK_DIR$MEDIALIB_PATH/jquery/jquery.min.js" "$URL_JQUERY";
 mkdir "$WORK_DIR$MEDIALIB_PATH/ckeditor";

ckeditor/app.js

@@ -0,0 +1,74 @@
+import {ClassicEditor as CKClassicEditor} from "@ckeditor/ckeditor5-editor-classic";
+
+import {Alignment} from "@ckeditor/ckeditor5-alignment";
+import {Autoformat} from "@ckeditor/ckeditor5-autoformat";
+import {Bold, Italic, Underline, Strikethrough, Code, Subscript, Superscript}
+	from "@ckeditor/ckeditor5-basic-styles";
+import {BlockQuote} from "@ckeditor/ckeditor5-block-quote";
+import {CodeBlock} from "@ckeditor/ckeditor5-code-block";
+import {Essentials} from "@ckeditor/ckeditor5-essentials";
+import {FontFamily, FontBackgroundColor, FontColor, FontSize}
+	from "@ckeditor/ckeditor5-font";
+import {Heading} from "@ckeditor/ckeditor5-heading";
+import {HorizontalLine} from "@ckeditor/ckeditor5-horizontal-line";
+import {HtmlEmbed} from "@ckeditor/ckeditor5-html-embed";
+import {Image, ImageCaption, ImageStyle, ImageToolbar, ImageInsert}
+	from "@ckeditor/ckeditor5-image";
+import {Indent} from "@ckeditor/ckeditor5-indent";
+import {Link} from "@ckeditor/ckeditor5-link";
+import {List} from "@ckeditor/ckeditor5-list";
+import {MediaEmbed} from "@ckeditor/ckeditor5-media-embed";
+import {Paragraph} from "@ckeditor/ckeditor5-paragraph";
+import {ShowBlocks} from "@ckeditor/ckeditor5-show-blocks";
+import {SourceEditing} from "@ckeditor/ckeditor5-source-editing";
+import {SpecialCharacters} from "@ckeditor/ckeditor5-special-characters";
+import {Table, TableCellProperties, TableProperties, TableToolbar, TableCaption, TableColumnResize}
+	from "@ckeditor/ckeditor5-table";
+import {TextTransformation} from "@ckeditor/ckeditor5-typing";
+
+class ClassicEditor extends CKClassicEditor {
+	static builtinPlugins = [
+		Alignment, Autoformat, BlockQuote, Bold, CodeBlock,
+		Essentials, FontFamily, FontSize, FontColor, FontBackgroundColor,
+		Heading, HorizontalLine, HtmlEmbed,
+		Image, ImageCaption, ImageStyle, ImageToolbar, ImageInsert,
+		Indent, Italic, Link, List, MediaEmbed, Paragraph, ShowBlocks,
+		SourceEditing, SpecialCharacters, Table, TableToolbar, TextTransformation,
+		Underline, Strikethrough, Code, Subscript, Superscript
+	];
+
+	static defaultConfig = {
+		toolbar: {
+			items: [
+				"undo", "redo", "showBlocks", "sourceEditing", "|",
+				"fontFamily", "fontSize", "fontColor", "fontBackgroundColor",
+				"bold", "italic", "underline", "strikethrough", "subscript", "superscript", "code", "-",
+				"bulletedList", "numberedList", "outdent", "indent", "alignment", "|",
+				"heading", "link", "blockQuote", "insertTable", "specialCharacters", "|",
+				"codeBlock", "mediaEmbed", "insertImage", "htmlEmbed"
+			],
+			shouldNotGroupWhenFull: true
+		},
+		language: "en",
+		image: {
+			toolbar: [
+				"imageTextAlternative",
+				"toggleImageCaption",
+				"imageStyle:inline",
+				"imageStyle:block",
+				"imageStyle:side"
+			]
+		},
+		table: {
+			contentToolbar: [
+				"tableColumn",
+				"tableRow",
+				"mergeTableCells"
+			]
+		}
+	};
+}
+
+window.ClassicEditor = ClassicEditor;
+
+export default ClassicEditor;

ckeditor/test.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>CKEditor test</title>
+	</head>
+	<body>
+		<div id="editor"></div>
+		<script src="dist/ckeditor.js"></script>
+		<script>
+			ClassicEditor.create(document.querySelector('#editor'), {})
+				.then(editor => {console.log("Initialized", editor)})
+				.catch(error => {console.error("Error loading editor:", error.stack)});
+		</script>
+	</body>
+</html>

ckeditor/webpack.config.js

@@ -0,0 +1,46 @@
+"use strict";
+
+const path = require( "path" );
+const {styles} = require( "@ckeditor/ckeditor5-dev-utils" );
+
+module.exports = {
+	entry: "./app.js",
+
+	output: {
+		path: path.resolve( __dirname, "dist" ),
+		filename: "ckeditor.js"
+	},
+
+	module: {
+		rules: [
+			{
+				test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
+				use: ["raw-loader"]
+			},
+			{
+				test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
+				use: [
+					{
+						loader: "style-loader",
+						options: {
+							injectType: "singletonStyleTag",
+							attributes: {"data-cke": true}
+						}
+					},
+					"css-loader",
+					{
+						loader: "postcss-loader",
+						options: {
+							postcssOptions: styles.getPostCssConfig({
+								themeImporter: {
+									themePath: require.resolve( "@ckeditor/ckeditor5-theme-lark" )
+								},
+								minify: true
+							})
+						}
+					}
+				]
+			}
+		]
+	}
+};