BC-5565 - classic toolbar mode (#13)

* Add classic toolbar * Add image via URL support
hpi-schul-cloud · Nov 24, 2023 · b1a855e · b1a855e
1 parent a87ee7f
commit b1a855e
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -8,6 +8,11 @@ Custom version of CKEditor5 for the Schulcloud-Verbund-Software-Client
 npm i @hpi-schul-cloud/ckeditor
 ```
 
+## Supported editor modes
+
+- classic toolbar
+- balloon toolbar
+
 ## Built-in plugins
 
 - AutoFormat
@@ -18,6 +23,8 @@ npm i @hpi-schul-cloud/ckeditor
 - Heading
 - Highlight
 - HorizontalLine
+- Image
+- ImageInsertViaUrl
 - Italic
 - Link
 - List
@@ -32,6 +39,8 @@ npm i @hpi-schul-cloud/ckeditor
 - TableToolbar
 - WordCount
 
+Note: the included image plugins only support an image insertion via URL, not via upload
+
 ## Supported languages
 
 - de

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@hpi-schul-cloud/ckeditor",
-	"version": "0.4.0",
+	"version": "1.0.0",
 	"description": "Custom version of CKEditor5 for the Schulcloud-Verbund-Software-Client",
 	"author": "Dataport Schulcloud-Verbund-Software Team",
 	"repository": {
@@ -26,10 +26,12 @@
 		"@ckeditor/ckeditor5-dev-translations": "^32.1.2",
 		"@ckeditor/ckeditor5-dev-utils": "^32.1.2",
 		"@ckeditor/ckeditor5-editor-balloon": "^37.1.0",
+		"@ckeditor/ckeditor5-editor-classic": "^37.1.0",
 		"@ckeditor/ckeditor5-essentials": "^37.1.0",
 		"@ckeditor/ckeditor5-heading": "^37.1.0",
 		"@ckeditor/ckeditor5-highlight": "^37.1.0",
 		"@ckeditor/ckeditor5-horizontal-line": "^37.1.0",
+		"@ckeditor/ckeditor5-image": "^37.1.0",
 		"@ckeditor/ckeditor5-link": "^37.1.0",
 		"@ckeditor/ckeditor5-list": "^37.1.0",
 		"@ckeditor/ckeditor5-paragraph": "^37.1.0",

diff --git a/sample/index.html b/sample/index.html
@@ -2,7 +2,7 @@
 <html lang="de">
 	<head>
 		<meta charset="utf-8" />
-		<title>CKEditor 5 – Editor preview</title>
+		<title>CKEditor5 – Editor preview</title>
 		<style>
 			body {
 				max-width: 920px;
@@ -16,14 +16,21 @@
 		<link rel="stylesheet" href="../build/ckeditor.css" />
 	</head>
 	<body>
-		<h2>CKEditor 5 – edit</h2>
+		<h1>CKEditor5 – Editor preview</h1>
 
-		<div id="editor">
+		<h2>Classic toolbar (de Version)</h2>
+		<div id="classiceditor">
 			Initial <strong>content</strong> of
 			<mark class="marker-blue">editor</mark>
 		</div>
 
-		<h2>CKEditor 5 – view</h2>
+		<h2>Balloon toolbar (en Version)</h2>
+		<div id="ballooneditor">
+			Initial <strong>content</strong> of
+			<mark class="marker-blue">editor</mark>
+		</div>
+
+		<h2>CK content view</h2>
 		<div id="view" class="ck-content">
 			Initial <strong>content</strong> of
 			<mark class="marker-blue">editor</mark>
@@ -43,11 +50,25 @@ <h2>Formula rendering from markup</h2>
 		<script src="../build/translations/uk.js"></script>
 		<script>
 			console.log(
-				CustomCKEditor.builtinPlugins.map((plugin) => plugin.pluginName)
+				CustomCKEditor.ClassicEditor.builtinPlugins.map(
+					(plugin) => plugin.pluginName
+				)
 			);
-			CustomCKEditor.create(document.querySelector("#editor"), {
-				language: "de",
-			}).catch((error) => {
+			CustomCKEditor.ClassicEditor.create(
+				document.querySelector("#classiceditor"),
+				{
+					language: "de",
+				}
+			).catch((error) => {
+				console.error(error);
+			});
+
+			CustomCKEditor.BalloonEditor.create(
+				document.querySelector("#ballooneditor"),
+				{
+					language: "en",
+				}
+			).catch((error) => {
 				console.error(error);
 			});
 

diff --git a/src/ckeditor.js b/src/ckeditor.js
@@ -1,4 +1,5 @@
-import BalloonEditor from "@ckeditor/ckeditor5-editor-balloon/src/ballooneditor.js";
+import { BalloonEditor as BalloonEditorBase } from "@ckeditor/ckeditor5-editor-balloon";
+import { ClassicEditor as ClassicEditorBase } from "@ckeditor/ckeditor5-editor-classic";
 import Autoformat from "@ckeditor/ckeditor5-autoformat/src/autoformat";
 import BlockQuote from "@ckeditor/ckeditor5-block-quote/src/blockquote.js";
 import Bold from "@ckeditor/ckeditor5-basic-styles/src/bold.js";
@@ -7,6 +8,8 @@ import Essentials from "@ckeditor/ckeditor5-essentials/src/essentials.js";
 import Heading from "@ckeditor/ckeditor5-heading/src/heading.js";
 import Highlight from "@ckeditor/ckeditor5-highlight/src/highlight.js";
 import HorizontalLine from "@ckeditor/ckeditor5-horizontal-line/src/horizontalline.js";
+import { Image } from "@ckeditor/ckeditor5-image";
+import ImageInsertViaUrl from "@ckeditor/ckeditor5-image/src/imageinsertviaurl.js";
 import Italic from "@ckeditor/ckeditor5-basic-styles/src/italic.js";
 import Link from "@ckeditor/ckeditor5-link/src/link.js";
 import List from "@ckeditor/ckeditor5-list/src/list.js";
@@ -30,9 +33,10 @@ import "./variables.css";
 import "./content-styles.css";
 import "./custom-content-styles.css";
 
-class Editor extends BalloonEditor {}
+class BalloonEditor extends BalloonEditorBase {}
+class ClassicEditor extends ClassicEditorBase {}
 
-Editor.builtinPlugins = [
+const plugins = [
 	Autoformat,
 	BlockQuote,
 	Bold,
@@ -41,6 +45,8 @@ Editor.builtinPlugins = [
 	Heading,
 	Highlight,
 	HorizontalLine,
+	Image,
+	ImageInsertViaUrl,
 	Italic,
 	Link,
 	List,
@@ -57,7 +63,7 @@ Editor.builtinPlugins = [
 	WordCount,
 ];
 
-Editor.defaultConfig = {
+const config = {
 	toolbar: {
 		items: [
 			"undo",
@@ -74,6 +80,7 @@ Editor.defaultConfig = {
 			"subscript",
 			"|",
 			"link",
+			"insertImage",
 			"bulletedList",
 			"numberedList",
 			"math",
@@ -97,9 +104,15 @@ Editor.defaultConfig = {
 	},
 };
 
+BalloonEditor.builtinPlugins = plugins;
+ClassicEditor.builtinPlugins = plugins;
+
+BalloonEditor.defaultConfig = config;
+ClassicEditor.defaultConfig = config;
+
 addMissingTranslationsDe();
 addMissingTranslationsEn();
 addMissingTranslationsEs();
 addMissingTranslationsUk();
 
-export default Editor;
+export default { BalloonEditor, ClassicEditor };