build ckeditor from scratch

This commit is contained in:
crispycat 2024-05-23 14:34:00 -04:00
parent c5d6bc7032
commit 90041cbbf7
7 changed files with 201 additions and 15 deletions

48
_scripts/build_ckeditor.sh Executable file
View File

@ -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";

9
_scripts/build_codemirror.sh Executable file
View File

@ -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";

View File

@ -10,7 +10,6 @@ LICENSE_PATH="/_license";
GIT_PHPMAILER="https://github.com/PHPMailer/PHPMailer"; GIT_PHPMAILER="https://github.com/PHPMailer/PHPMailer";
GIT_CODEMIRROR="https://github.com/codemirror/codemirror5"; GIT_CODEMIRROR="https://github.com/codemirror/codemirror5";
URL_JQUERY="https://code.jquery.com/jquery-3.7.1.min.js"; 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_PHPMAILER="https://raw.githubusercontent.com/PHPMailer/PHPMailer/master/LICENSE";
LICENSE_JQUERY="https://raw.githubusercontent.com/jquery/jquery/main/LICENSE.txt"; 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; which npm;
if [[ $? -gt 0 ]]; then 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 else
echo "Pulling CodeMirror"; echo "Pulling CodeMirror";
mkdir "$REPOS_DIR/codemirror"; mkdir "$REPOS_DIR/codemirror";
git clone "$GIT_CODEMIRROR" "$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 fi
echo "Downloading jQuery, CKEditor"; echo "Downloading jQuery";
mkdir "$WORK_DIR$MEDIALIB_PATH/jquery"; mkdir "$WORK_DIR$MEDIALIB_PATH/jquery";
wget -O "$WORK_DIR$MEDIALIB_PATH/jquery/jquery.min.js" "$URL_JQUERY"; wget -O "$WORK_DIR$MEDIALIB_PATH/jquery/jquery.min.js" "$URL_JQUERY";
mkdir "$WORK_DIR$MEDIALIB_PATH/ckeditor"; mkdir "$WORK_DIR$MEDIALIB_PATH/ckeditor";

74
ckeditor/app.js Normal file
View File

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

15
ckeditor/test.html Normal file
View File

@ -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>

View File

@ -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
})
}
}
]
}
]
}
};

File diff suppressed because one or more lines are too long