Introduce Vue CDN integration.

ckeditor · Sep 5, 2024 · 49fb426 · 49fb426
1 parent 0d1f112
commit 49fb426
Show file tree

Hide file tree

Showing 20 changed files with 1,959 additions and 21 deletions.
diff --git a/demos/editor-cdn-suspense/App.vue b/demos/editor-cdn-suspense/App.vue
@@ -0,0 +1,14 @@
+<template>
+  <!-- `<Suspense>` is an experimental feature in Vue.js, so use it at your own risk -->
+  <Suspense>
+    <Editor />
+
+    <template #fallback>
+      Loading...
+    </template>
+  </Suspense>
+</template>
+
+<script setup lang="ts">
+import Editor from './Editor.vue';
+</script>
diff --git a/demos/editor-cdn-suspense/Editor.vue b/demos/editor-cdn-suspense/Editor.vue
@@ -0,0 +1,123 @@
+<template>
+  <h2>Using CKEditor 5 from CDN and &lt;Suspense&gt; in Vue 3</h2>
+
+  <ckeditor
+    v-if="EditorConstructor"
+    v-model="data"
+    tag-name="textarea"
+    :disable-two-way-data-binding="isTwoWayDataBindingDisabled"
+    :editor="EditorConstructor"
+    :config="config"
+    :disabled="disabled"
+    @ready="onReady"
+    @focus="onFocus"
+    @blur="onBlur"
+    @input="onInput"
+    @destroy="onDestroy"
+  />
+
+  <button @click="toggleEditorDisabled">
+    {{ disabled ? 'Enable' : 'Disable' }} editor
+  </button>
+
+  <button @click="toggleTwoWayBinding">
+    {{ isTwoWayDataBindingDisabled ? 'Enable' : 'Disable' }} two way binding
+  </button>
+
+  <button
+    v-if="isTwoWayDataBindingDisabled"
+    @click="setEditorData"
+  >
+    Set editor data
+  </button>
+
+  <h2>Live editor data</h2>
+
+  <textarea v-model="data" />
+</template>
+
+<script async setup lang="ts">
+import { ref, reactive } from 'vue';
+
+import type * as CKEditor5 from 'https://cdn.ckeditor.com/typings/ckeditor5.d.ts';
+import { loadCKEditorCloud } from '../../src/plugin.js';
+
+// Load CKEditor from the CDN
+const { CKEditor } = await loadCKEditorCloud( {
+	version: '43.0.0'
+} );
+
+const { ClassicEditor, Paragraph, Essentials, Heading, Bold, Italic } = CKEditor;
+
+class EditorConstructor extends ClassicEditor {
+	static builtinPlugins = [
+		Essentials,
+		Paragraph,
+		Heading,
+		Bold,
+		Italic
+	];
+}
+
+// State
+const data = ref( '<p>Hello world!</p>' );
+const disabled = ref( false );
+const isTwoWayDataBindingDisabled = ref( false );
+const config = reactive( {
+	toolbar: [ 'heading', '|', 'bold', 'italic' ]
+} );
+
+const editorInstance = ref<CKEditor5.ClassicEditor | null>( null );
+
+// Methods
+function setEditorData() {
+	data.value = editorInstance.value?.getData() ?? '';
+}
+
+function toggleTwoWayBinding() {
+	isTwoWayDataBindingDisabled.value = !isTwoWayDataBindingDisabled.value;
+}
+
+function toggleEditorDisabled() {
+	disabled.value = !disabled.value;
+}
+
+function onReady( editor: CKEditor5.ClassicEditor ) {
+	editorInstance.value = editor;
+
+	console.log( 'Editor is ready.', { editor } );
+}
+
+function onFocus( event: CKEditor5.EventInfo, editor: CKEditor5.ClassicEditor ) {
+	console.log( 'Editor focused.', { event, editor } );
+}
+
+function onBlur( event: CKEditor5.EventInfo, editor: CKEditor5.ClassicEditor ) {
+	console.log( 'Editor blurred.', { event, editor } );
+}
+
+function onInput( data: string, event: CKEditor5.EventInfo, editor: CKEditor5.ClassicEditor ) {
+	console.log( 'Editor data input.', { event, editor, data } );
+}
+
+function onDestroy() {
+	console.log( 'Editor destroyed.' );
+}
+</script>
+
+<style>
+body {
+	max-width: 800px;
+	margin: 20px auto;
+}
+
+textarea {
+	width: 100%;
+	height: 100px;
+	font-family: monospace;
+}
+
+button {
+	margin-top: 10px;
+}
+</style>
diff --git a/demos/editor-cdn-suspense/demo.ts b/demos/editor-cdn-suspense/demo.ts
@@ -0,0 +1,12 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import { createApp } from 'vue';
+import { CkeditorPlugin } from '../../src/plugin.js';
+import App from './App.vue';
+
+createApp( App )
+	.use( CkeditorPlugin )
+	.mount( '#app' );
diff --git a/demos/editor-cdn-suspense/index.html b/demos/editor-cdn-suspense/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="data:;base64,iVBORw0KGgo=">
+    <title>CKEditor Vue Suspense + CDN example</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/demos/editor-cdn-suspense/demo.ts"></script>
+  </body>
+</html>
diff --git a/demos/editor-cdn/App.vue b/demos/editor-cdn/App.vue
@@ -0,0 +1,130 @@
+<template>
+  <h2>Using CKEditor 5 from CDN in Vue 3</h2>
+
+  <ckeditor
+    v-if="TestEditor"
+    v-model="data"
+    tag-name="textarea"
+    :disable-two-way-data-binding="isTwoWayDataBindingDisabled"
+    :editor="TestEditor"
+    :config="config"
+    :disabled="disabled"
+    @ready="onReady"
+    @focus="onFocus"
+    @blur="onBlur"
+    @input="onInput"
+    @destroy="onDestroy"
+  />
+
+  <button @click="toggleEditorDisabled">
+    {{ disabled ? 'Enable' : 'Disable' }} editor
+  </button>
+
+  <button @click="toggleTwoWayBinding">
+    {{ isTwoWayDataBindingDisabled ? 'Enable' : 'Disable' }} two way binding
+  </button>
+
+  <button
+    v-if="isTwoWayDataBindingDisabled"
+    @click="setEditorData"
+  >
+    Set editor data
+  </button>
+
+  <h2>Live editor data</h2>
+
+  <textarea v-model="data" />
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed } from 'vue';
+import useCKEditorCloud from '../../src/useCKEditorCloud';
+import type { EventInfo, ClassicEditor } from 'https://cdn.ckeditor.com/typings/ckeditor5.d.ts';
+
+// Load CKEditor from the CDN
+const cloud = useCKEditorCloud( {
+	version: '43.0.0'
+} );
+
+const TestEditor = computed<typeof ClassicEditor | null>( () => {
+	if ( !cloud.data.value ) {
+		return null;
+	}
+
+	const {
+		ClassicEditor: BaseEditor, Paragraph,
+		Essentials, Heading, Bold, Italic
+	} = cloud.data.value.CKEditor;
+
+	return class TestEditor extends BaseEditor {
+		static builtinPlugins = [
+			Essentials,
+			Paragraph,
+			Heading,
+			Bold,
+			Italic
+		];
+	};
+} );
+
+// State
+const editorInstance = ref<ClassicEditor | null>( null );
+const data = ref( '<p>Hello world!</p>' );
+const disabled = ref( false );
+const isTwoWayDataBindingDisabled = ref( false );
+const config = reactive( {
+	toolbar: [ 'heading', '|', 'bold', 'italic' ]
+} );
+
+// Methods
+function setEditorData() {
+	data.value = editorInstance.value?.getData() ?? '';
+}
+
+function toggleTwoWayBinding() {
+	isTwoWayDataBindingDisabled.value = !isTwoWayDataBindingDisabled.value;
+}
+
+function toggleEditorDisabled() {
+	disabled.value = !disabled.value;
+}
+
+function onReady( editor: ClassicEditor ) {
+	editorInstance.value = editor;
+
+	console.log( 'Editor is ready.', { editor } );
+}
+
+function onFocus( event: EventInfo, editor: ClassicEditor ) {
+	console.log( 'Editor focused.', { event, editor } );
+}
+
+function onBlur( event: EventInfo, editor: ClassicEditor ) {
+	console.log( 'Editor blurred.', { event, editor } );
+}
+
+function onInput( data: string, event: EventInfo, editor: ClassicEditor ) {
+	console.log( 'Editor data input.', { event, editor, data } );
+}
+
+function onDestroy() {
+	console.log( 'Editor destroyed.' );
+}
+</script>
+
+<style>
+body {
+	max-width: 800px;
+	margin: 20px auto;
+}
+
+textarea {
+	width: 100%;
+	height: 100px;
+	font-family: monospace;
+}
+
+button {
+	margin-top: 10px;
+}
+</style>
diff --git a/demos/editor-cdn/demo.ts b/demos/editor-cdn/demo.ts
@@ -0,0 +1,12 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import { createApp } from 'vue';
+import { CkeditorPlugin } from '../../src/plugin.js';
+import App from './App.vue';
+
+createApp( App )
+	.use( CkeditorPlugin )
+	.mount( '#app' );
diff --git a/demos/editor-cdn/index.html b/demos/editor-cdn/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="data:;base64,iVBORw0KGgo=">
+    <title>CKEditor Vue CDN example</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/demos/editor-cdn/demo.ts"></script>
+  </body>
+</html>
diff --git a/demo/App.vue → demos/editor-npm/App.vue b/demo/App.vue → demos/editor-npm/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <h1>Example of using CKEditor 5 in Vue.js 3.x</h1>
+  <h2>Using CKEditor 5 from NPM in Vue 3</h2>
 
   <ckeditor
     v-model="data"

diff --git a/demo/demo.ts → demos/editor-npm/demo.ts b/demo/demo.ts → demos/editor-npm/demo.ts
@@ -4,7 +4,7 @@
  */
 
 import { createApp } from 'vue';
-import { CkeditorPlugin } from '../src/plugin.js';
+import { CkeditorPlugin } from '../../src/plugin.js';
 import App from './App.vue';
 
 import 'ckeditor5/ckeditor5.css';

diff --git a/demos/editor-npm/index.html b/demos/editor-npm/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="data:;base64,iVBORw0KGgo=">
+    <title>CKEditor Vue NPM example</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/demos/editor-npm/demo.ts"></script>
+  </body>
+</html>
diff --git a/demo/tsconfig.json → demos/tsconfig.json b/demo/tsconfig.json → demos/tsconfig.json
diff --git a/index.html b/index.html
@@ -1,13 +1,18 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" href="data:;base64,iVBORw0KGgo=">
-    <title>CKEditor Vue example</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/demo/demo.ts"></script>
-  </body>
+<head>
+	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<link rel="icon" href="data:;base64,iVBORw0KGgo=">
+	<title>CKEditor Vue example</title>
+</head>
+<body>
+	<div style="display: flex; flex-direction: column;">
+		<p>Select the demo you want to test:</p>
+
+		<a href="/demos/editor-npm/index.html">Editor + NPM</a>
+		<a href="/demos/editor-cdn/index.html">Editor + CDN</a>
+		<a href="/demos/editor-cdn-suspense/index.html">Suspense + Editor + CDN</a>
+	</div>
+</body>
 </html>