Skip to content

Commit d17eb7f

Browse files
Mati365Mati365
authored
Merge pull request #301 from ckeditor/ck/cloud-poc
Introduce Vue CDN integration.
2 parents 0d1f112 + 49fb426 commit d17eb7f

20 files changed

+1959
-21
lines changed

‎demos/editor-cdn-suspense/App.vue

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<template>
2+
<!-- `<Suspense>` is an experimental feature in Vue.js, so use it at your own risk -->
3+
<Suspense>
4+
<Editor />
5+
6+
<template #fallback>
7+
Loading...
8+
</template>
9+
</Suspense>
10+
</template>
11+
12+
<script setup lang="ts">
13+
import Editor from './Editor.vue';
14+
</script>

‎demos/editor-cdn-suspense/Editor.vue

+123
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
<template>
2+
<h2>Using CKEditor 5 from CDN and &lt;Suspense&gt; in Vue 3</h2>
3+
4+
<ckeditor
5+
v-if="EditorConstructor"
6+
v-model="data"
7+
tag-name="textarea"
8+
:disable-two-way-data-binding="isTwoWayDataBindingDisabled"
9+
:editor="EditorConstructor"
10+
:config="config"
11+
:disabled="disabled"
12+
@ready="onReady"
13+
@focus="onFocus"
14+
@blur="onBlur"
15+
@input="onInput"
16+
@destroy="onDestroy"
17+
/>
18+
19+
<button @click="toggleEditorDisabled">
20+
{{ disabled ? 'Enable' : 'Disable' }} editor
21+
</button>
22+
23+
<button @click="toggleTwoWayBinding">
24+
{{ isTwoWayDataBindingDisabled ? 'Enable' : 'Disable' }} two way binding
25+
</button>
26+
27+
<button
28+
v-if="isTwoWayDataBindingDisabled"
29+
@click="setEditorData"
30+
>
31+
Set editor data
32+
</button>
33+
34+
<h2>Live editor data</h2>
35+
36+
<textarea v-model="data" />
37+
</template>
38+
39+
<script async setup lang="ts">
40+
import { ref, reactive } from 'vue';
41+
42+
import type * as CKEditor5 from 'https://cdn.ckeditor.com/typings/ckeditor5.d.ts';
43+
import { loadCKEditorCloud } from '../../src/plugin.js';
44+
45+
// Load CKEditor from the CDN
46+
const { CKEditor } = await loadCKEditorCloud( {
47+
version: '43.0.0'
48+
} );
49+
50+
const { ClassicEditor, Paragraph, Essentials, Heading, Bold, Italic } = CKEditor;
51+
52+
class EditorConstructor extends ClassicEditor {
53+
static builtinPlugins = [
54+
Essentials,
55+
Paragraph,
56+
Heading,
57+
Bold,
58+
Italic
59+
];
60+
}
61+
62+
// State
63+
const data = ref( '<p>Hello world!</p>' );
64+
const disabled = ref( false );
65+
const isTwoWayDataBindingDisabled = ref( false );
66+
const config = reactive( {
67+
toolbar: [ 'heading', '|', 'bold', 'italic' ]
68+
} );
69+
70+
const editorInstance = ref<CKEditor5.ClassicEditor | null>( null );
71+
72+
// Methods
73+
function setEditorData() {
74+
data.value = editorInstance.value?.getData() ?? '';
75+
}
76+
77+
function toggleTwoWayBinding() {
78+
isTwoWayDataBindingDisabled.value = !isTwoWayDataBindingDisabled.value;
79+
}
80+
81+
function toggleEditorDisabled() {
82+
disabled.value = !disabled.value;
83+
}
84+
85+
function onReady( editor: CKEditor5.ClassicEditor ) {
86+
editorInstance.value = editor;
87+
88+
console.log( 'Editor is ready.', { editor } );
89+
}
90+
91+
function onFocus( event: CKEditor5.EventInfo, editor: CKEditor5.ClassicEditor ) {
92+
console.log( 'Editor focused.', { event, editor } );
93+
}
94+
95+
function onBlur( event: CKEditor5.EventInfo, editor: CKEditor5.ClassicEditor ) {
96+
console.log( 'Editor blurred.', { event, editor } );
97+
}
98+
99+
function onInput( data: string, event: CKEditor5.EventInfo, editor: CKEditor5.ClassicEditor ) {
100+
console.log( 'Editor data input.', { event, editor, data } );
101+
}
102+
103+
function onDestroy() {
104+
console.log( 'Editor destroyed.' );
105+
}
106+
</script>
107+
108+
<style>
109+
body {
110+
max-width: 800px;
111+
margin: 20px auto;
112+
}
113+
114+
textarea {
115+
width: 100%;
116+
height: 100px;
117+
font-family: monospace;
118+
}
119+
120+
button {
121+
margin-top: 10px;
122+
}
123+
</style>

‎demos/editor-cdn-suspense/demo.ts

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/**
2+
* @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
3+
* For licensing, see LICENSE.md.
4+
*/
5+
6+
import { createApp } from 'vue';
7+
import { CkeditorPlugin } from '../../src/plugin.js';
8+
import App from './App.vue';
9+
10+
createApp( App )
11+
.use( CkeditorPlugin )
12+
.mount( '#app' );

‎demos/editor-cdn-suspense/index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
7+
<title>CKEditor Vue Suspense + CDN example</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/demos/editor-cdn-suspense/demo.ts"></script>
12+
</body>
13+
</html>

‎demos/editor-cdn/App.vue

+130
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
<template>
2+
<h2>Using CKEditor 5 from CDN in Vue 3</h2>
3+
4+
<ckeditor
5+
v-if="TestEditor"
6+
v-model="data"
7+
tag-name="textarea"
8+
:disable-two-way-data-binding="isTwoWayDataBindingDisabled"
9+
:editor="TestEditor"
10+
:config="config"
11+
:disabled="disabled"
12+
@ready="onReady"
13+
@focus="onFocus"
14+
@blur="onBlur"
15+
@input="onInput"
16+
@destroy="onDestroy"
17+
/>
18+
19+
<button @click="toggleEditorDisabled">
20+
{{ disabled ? 'Enable' : 'Disable' }} editor
21+
</button>
22+
23+
<button @click="toggleTwoWayBinding">
24+
{{ isTwoWayDataBindingDisabled ? 'Enable' : 'Disable' }} two way binding
25+
</button>
26+
27+
<button
28+
v-if="isTwoWayDataBindingDisabled"
29+
@click="setEditorData"
30+
>
31+
Set editor data
32+
</button>
33+
34+
<h2>Live editor data</h2>
35+
36+
<textarea v-model="data" />
37+
</template>
38+
39+
<script setup lang="ts">
40+
import { ref, reactive, computed } from 'vue';
41+
import useCKEditorCloud from '../../src/useCKEditorCloud';
42+
import type { EventInfo, ClassicEditor } from 'https://cdn.ckeditor.com/typings/ckeditor5.d.ts';
43+
44+
// Load CKEditor from the CDN
45+
const cloud = useCKEditorCloud( {
46+
version: '43.0.0'
47+
} );
48+
49+
const TestEditor = computed<typeof ClassicEditor | null>( () => {
50+
if ( !cloud.data.value ) {
51+
return null;
52+
}
53+
54+
const {
55+
ClassicEditor: BaseEditor, Paragraph,
56+
Essentials, Heading, Bold, Italic
57+
} = cloud.data.value.CKEditor;
58+
59+
return class TestEditor extends BaseEditor {
60+
static builtinPlugins = [
61+
Essentials,
62+
Paragraph,
63+
Heading,
64+
Bold,
65+
Italic
66+
];
67+
};
68+
} );
69+
70+
// State
71+
const editorInstance = ref<ClassicEditor | null>( null );
72+
const data = ref( '<p>Hello world!</p>' );
73+
const disabled = ref( false );
74+
const isTwoWayDataBindingDisabled = ref( false );
75+
const config = reactive( {
76+
toolbar: [ 'heading', '|', 'bold', 'italic' ]
77+
} );
78+
79+
// Methods
80+
function setEditorData() {
81+
data.value = editorInstance.value?.getData() ?? '';
82+
}
83+
84+
function toggleTwoWayBinding() {
85+
isTwoWayDataBindingDisabled.value = !isTwoWayDataBindingDisabled.value;
86+
}
87+
88+
function toggleEditorDisabled() {
89+
disabled.value = !disabled.value;
90+
}
91+
92+
function onReady( editor: ClassicEditor ) {
93+
editorInstance.value = editor;
94+
95+
console.log( 'Editor is ready.', { editor } );
96+
}
97+
98+
function onFocus( event: EventInfo, editor: ClassicEditor ) {
99+
console.log( 'Editor focused.', { event, editor } );
100+
}
101+
102+
function onBlur( event: EventInfo, editor: ClassicEditor ) {
103+
console.log( 'Editor blurred.', { event, editor } );
104+
}
105+
106+
function onInput( data: string, event: EventInfo, editor: ClassicEditor ) {
107+
console.log( 'Editor data input.', { event, editor, data } );
108+
}
109+
110+
function onDestroy() {
111+
console.log( 'Editor destroyed.' );
112+
}
113+
</script>
114+
115+
<style>
116+
body {
117+
max-width: 800px;
118+
margin: 20px auto;
119+
}
120+
121+
textarea {
122+
width: 100%;
123+
height: 100px;
124+
font-family: monospace;
125+
}
126+
127+
button {
128+
margin-top: 10px;
129+
}
130+
</style>

‎demos/editor-cdn/demo.ts

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/**
2+
* @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
3+
* For licensing, see LICENSE.md.
4+
*/
5+
6+
import { createApp } from 'vue';
7+
import { CkeditorPlugin } from '../../src/plugin.js';
8+
import App from './App.vue';
9+
10+
createApp( App )
11+
.use( CkeditorPlugin )
12+
.mount( '#app' );

‎demos/editor-cdn/index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
7+
<title>CKEditor Vue CDN example</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/demos/editor-cdn/demo.ts"></script>
12+
</body>
13+
</html>

‎demo/App.vue ‎demos/editor-npm/App.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<h1>Example of using CKEditor 5 in Vue.js 3.x</h1>
2+
<h2>Using CKEditor 5 from NPM in Vue 3</h2>
33

44
<ckeditor
55
v-model="data"

‎demo/demo.ts ‎demos/editor-npm/demo.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
*/
55

66
import { createApp } from 'vue';
7-
import { CkeditorPlugin } from '../src/plugin.js';
7+
import { CkeditorPlugin } from '../../src/plugin.js';
88
import App from './App.vue';
99

1010
import 'ckeditor5/ckeditor5.css';

‎demos/editor-npm/index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
7+
<title>CKEditor Vue NPM example</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/demos/editor-npm/demo.ts"></script>
12+
</body>
13+
</html>

‎demo/tsconfig.json ‎demos/tsconfig.json

File renamed without changes.

‎index.html

+15-10
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
11
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
7-
<title>CKEditor Vue example</title>
8-
</head>
9-
<body>
10-
<div id="app"></div>
11-
<script type="module" src="/demo/demo.ts"></script>
12-
</body>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
7+
<title>CKEditor Vue example</title>
8+
</head>
9+
<body>
10+
<div style="display: flex; flex-direction: column;">
11+
<p>Select the demo you want to test:</p>
12+
13+
<a href="/demos/editor-npm/index.html">Editor + NPM</a>
14+
<a href="/demos/editor-cdn/index.html">Editor + CDN</a>
15+
<a href="/demos/editor-cdn-suspense/index.html">Suspense + Editor + CDN</a>
16+
</div>
17+
</body>
1318
</html>

0 commit comments

Comments
 (0)