ckeditor · gorzelinski · Sep 24, 2024 · Sep 24, 2024
diff --git a/timestamp-plugin/cdn/final-project/index.html b/timestamp-plugin/cdn/final-project/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>CKEditor 5 Framework – timestamp plugin</title>
+        <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.1.0/ckeditor5.css" />
+    </head>
+    <body>
+        <div id="editor">
+          <h2>Timestamp plugin</h2>
+          <p>Press the timestamp button to insert the current date and time.</p>
+        </div>
+
+        <script src="https://cdn.ckeditor.com/ckeditor5/43.1.0/ckeditor5.umd.js"></script>
+
+        <script type="module" src="/main.js"></script>
+    </body>
+</html>
diff --git a/timestamp-plugin/cdn/final-project/main.js b/timestamp-plugin/cdn/final-project/main.js
@@ -0,0 +1,58 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+const { 
+  ClassicEditor,
+  Bold,
+  Essentials,
+  Heading,
+  Italic,
+  Paragraph,
+  List,
+  Plugin,
+  ButtonView
+} = CKEDITOR;
+
+class Timestamp extends Plugin {
+	init() {
+		const editor = this.editor;
+
+		editor.ui.componentFactory.add( 'timestamp', () => {
+			// The button will be an instance of ButtonView.
+			const button = new ButtonView();
+
+			button.set( {
+				label: 'Timestamp',
+				withText: true
+			} );
+
+			//Execute a callback function when the button is clicked
+			button.on( 'execute', () => {
+				const now = new Date();
+
+				//Change the model using the model writer
+				editor.model.change( writer => {
+
+					//Insert the text at the user's current position
+					editor.model.insertContent( writer.createText( now.toString() ) );
+				} );
+			} );
+
+			return button;
+		} );
+	}
+}
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ Essentials, Paragraph, Heading, List, Bold, Italic, Timestamp ],
+		toolbar: [ 'heading', 'bold', 'italic', 'numberedList', 'bulletedList', 'timestamp' ]
+	} )
+	.then( editor => {
+		console.log( 'Editor was initialized', editor );
+	} )
+	.catch( error => {
+		console.error( error.stack );
+	} );
diff --git a/timestamp-plugin/cdn/final-project/package.json b/timestamp-plugin/cdn/final-project/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "final-project",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "vite": "^5.4.1"
+  }
+}
diff --git a/timestamp-plugin/cdn/starter-files/index.html b/timestamp-plugin/cdn/starter-files/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>CKEditor 5 Framework – timestamp plugin</title>
+        <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.1.0/ckeditor5.css" />
+    </head>
+    <body>
+        <div id="editor">
+          <h2>Timestamp plugin</h2>
+          <p>Press the timestamp button to insert the current date and time.</p>
+        </div>
+
+        <script src="https://cdn.ckeditor.com/ckeditor5/43.1.0/ckeditor5.umd.js"></script>
+
+        <script type="module" src="/main.js"></script>
+    </body>
+</html>
diff --git a/timestamp-plugin/cdn/starter-files/main.js b/timestamp-plugin/cdn/starter-files/main.js
@@ -0,0 +1,27 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+const { 
+  ClassicEditor,
+  Bold,
+  Essentials,
+  Heading,
+  Italic,
+  Paragraph,
+  List
+} =  CKEDITOR;
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+    licenseKey: 'GPL',
+		plugins: [ Essentials, Paragraph, Heading, List, Bold, Italic ],
+		toolbar: [ 'heading', 'bold', 'italic', 'numberedList', 'bulletedList' ]
+	} )
+	.then( editor => {
+		console.log( 'Editor was initialized', editor );
+	} )
+	.catch( error => {
+		console.error( error.stack );
+	} );
diff --git a/timestamp-plugin/cdn/starter-files/package.json b/timestamp-plugin/cdn/starter-files/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "starter-files",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "vite": "^5.4.1"
+  }
+}
diff --git a/timestamp-plugin/final-project/index.html → ...stamp-plugin/npm/final-project/index.html b/timestamp-plugin/final-project/index.html → ...stamp-plugin/npm/final-project/index.html
diff --git a/timestamp-plugin/final-project/main.js → timestamp-plugin/npm/final-project/main.js b/timestamp-plugin/final-project/main.js → timestamp-plugin/npm/final-project/main.js
diff --git a/timestamp-plugin/final-project/package.json → ...amp-plugin/npm/final-project/package.json b/timestamp-plugin/final-project/package.json → ...amp-plugin/npm/final-project/package.json
diff --git a/timestamp-plugin/starter-files/index.html → ...stamp-plugin/npm/starter-files/index.html b/timestamp-plugin/starter-files/index.html → ...stamp-plugin/npm/starter-files/index.html
diff --git a/timestamp-plugin/starter-files/main.js → timestamp-plugin/npm/starter-files/main.js b/timestamp-plugin/starter-files/main.js → timestamp-plugin/npm/starter-files/main.js
diff --git a/timestamp-plugin/starter-files/package.json → ...amp-plugin/npm/starter-files/package.json b/timestamp-plugin/starter-files/package.json → ...amp-plugin/npm/starter-files/package.json