alfiramdhani25 1 year ago
parent
commit
6c1d099738

+ 6 - 2
src/main/java/com/fusi24/hse/begems/editor/controller/WebController.java

@@ -2,12 +2,16 @@ package com.fusi24.hse.begems.editor.controller;
2 2
 
3 3
 import org.springframework.stereotype.Controller;
4 4
 import org.springframework.web.bind.annotation.GetMapping;
5
+import org.springframework.web.servlet.ModelAndView;
5 6
 
6 7
 @Controller
7 8
 public class WebController {
8 9
 
9 10
 	@GetMapping
10
-	public String index() {
11
-		return "index";
11
+	public ModelAndView index() {
12
+		ModelAndView modelAndView = new ModelAndView("index");
13
+		modelAndView.addObject("title", "HSE Editor");
14
+		modelAndView.addObject("heading", "HSE BeGeMS Document Editor");
15
+		return modelAndView;
12 16
 	}
13 17
 }

+ 427 - 21
src/main/resources/templates/index.html

@@ -2,31 +2,437 @@
2 2
 <html lang="en">
3 3
 <head>
4 4
     <meta charset="utf-8">
5
-    <title>CKEditor 5 – Document editor</title>
6
-    <script src="https://cdn.ckeditor.com/ckeditor5/35.4.0/decoupled-document/ckeditor.js"></script>
5
+    <title th:text="${title}"></title>
6
+    <style>
7
+    .document-editor {
8
+        border: 1px solid var(--ck-color-base-border);
9
+        border-radius: var(--ck-border-radius);
10
+
11
+        /* Set vertical boundaries for the document editor. */
12
+        max-height: 700px;
13
+
14
+        /* This element is a flex container for easier rendering. */
15
+        display: flex;
16
+        flex-flow: column nowrap;
17
+    }
18
+
19
+    .document-editor__toolbar {
20
+        /* Make sure the toolbar container is always above the editable. */
21
+        z-index: 1;
22
+
23
+        /* Create the illusion of the toolbar floating over the editable. */
24
+        box-shadow: 0 0 5px hsla( 0,0%,0%,.2 );
25
+
26
+        /* Use the CKEditor CSS variables to keep the UI consistent. */
27
+        border-bottom: 1px solid var(--ck-color-toolbar-border);
28
+    }
29
+
30
+    /* Adjust the look of the toolbar inside of the container. */
31
+    .document-editor__toolbar .ck-toolbar {
32
+        border: 0;
33
+        border-radius: 0;
34
+    }
35
+
36
+    /* Make the editable container look like the inside of a native word processor app. */
37
+    .document-editor__editable-container {
38
+        padding: calc( 2 * var(--ck-spacing-large) );
39
+        background: var(--ck-color-base-foreground);
40
+
41
+        /* Make it possible to scroll the "page" of the edited content. */
42
+        overflow-y: scroll;
43
+    }
44
+
45
+    .ck-editor__editable {
46
+        /* Set the dimensions of the "page". */
47
+        width: 25.8cm;
48
+        min-height: 21cm;
49
+
50
+        /* Keep the "page" off the boundaries of the container. */
51
+        padding: 1cm 2cm 2cm;
52
+
53
+        border: 1px hsl( 0,0%,82.7% ) solid;
54
+        border-radius: var(--ck-border-radius);
55
+        background: white;
56
+
57
+        /* The "page" should cast a slight shadow (3D illusion). */
58
+        box-shadow: 0 0 5px hsla( 0,0%,0%,.1 );
59
+
60
+        /* Center the "page". */
61
+        margin: 0 auto;
62
+    }
63
+
64
+    /* Override the page's width in the "Examples" section which is wider. */
65
+    .main__content-wide .document-editor__editable-container .document-editor__editable.ck-editor__editable {
66
+        width: 18cm;
67
+    }
68
+
69
+    /* Set the default font for the "page" of the content. */
70
+    .document-editor .ck-content,
71
+    .document-editor .ck-heading-dropdown .ck-list .ck-button__label {
72
+        font: 16px/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif;
73
+    }
74
+
75
+    /* Adjust the headings dropdown to host some larger heading styles. */
76
+    .document-editor .ck-heading-dropdown .ck-list .ck-button__label {
77
+        line-height: calc( 1.7 * var(--ck-line-height-base) * var(--ck-font-size-base) );
78
+        min-width: 6em;
79
+    }
80
+
81
+    /* Scale down all heading previews because they are way too big to be presented in the UI.
82
+    Preserve the relative scale, though. */
83
+    .document-editor .ck-heading-dropdown .ck-list .ck-heading_heading1 .ck-button__label,
84
+    .document-editor .ck-heading-dropdown .ck-list .ck-heading_heading2 .ck-button__label {
85
+        transform: scale(0.8);
86
+        transform-origin: left;
87
+    }
88
+
89
+    /* Set the styles for "Heading 1". */
90
+    .document-editor .ck-content h2,
91
+    .document-editor .ck-heading-dropdown .ck-heading_heading1 .ck-button__label {
92
+        font-size: 2.18em;
93
+        font-weight: normal;
94
+    }
95
+
96
+    .document-editor .ck-content h2 {
97
+        line-height: 1.37em;
98
+        padding-top: .342em;
99
+        margin-bottom: .142em;
100
+    }
101
+
102
+    /* Set the styles for "Heading 2". */
103
+    .document-editor .ck-content h3,
104
+    .document-editor .ck-heading-dropdown .ck-heading_heading2 .ck-button__label {
105
+        font-size: 1.75em;
106
+        font-weight: normal;
107
+        color: hsl( 203, 100%, 50% );
108
+    }
109
+
110
+    .document-editor .ck-heading-dropdown .ck-heading_heading2.ck-on .ck-button__label {
111
+        color: var(--ck-color-list-button-on-text);
112
+    }
113
+
114
+    /* Set the styles for "Heading 2". */
115
+    .document-editor .ck-content h3 {
116
+        line-height: 1.86em;
117
+        padding-top: .171em;
118
+        margin-bottom: .357em;
119
+    }
120
+
121
+    /* Set the styles for "Heading 3". */
122
+    .document-editor .ck-content h4,
123
+    .document-editor .ck-heading-dropdown .ck-heading_heading3 .ck-button__label {
124
+        font-size: 1.31em;
125
+        font-weight: bold;
126
+    }
127
+
128
+    .document-editor .ck-content h4 {
129
+        line-height: 1.24em;
130
+        padding-top: .286em;
131
+        margin-bottom: .952em;
132
+    }
133
+
134
+    /* Make the block quoted text serif with some additional spacing. */
135
+    .document-editor .ck-content blockquote {
136
+        font-family: Georgia, serif;
137
+        margin-left: calc( 2 * var(--ck-spacing-large) );
138
+        margin-right: calc( 2 * var(--ck-spacing-large) );
139
+    }
140
+
141
+    @media only screen and (max-width: 960px) {
142
+        /* Because on mobile 2cm paddings are to big. */
143
+        .document-editor__editable-container .document-editor__editable.ck-editor__editable {
144
+            padding: 1.5em;
145
+        }
146
+    }
147
+
148
+    @media only screen and (max-width: 1200px) {
149
+        .main__content-wide .document-editor__editable-container .document-editor__editable.ck-editor__editable {
150
+            width: 100%;
151
+        }
152
+    }
153
+
154
+    /* Style document editor a'ka Google Docs.*/
155
+    @media only screen and (min-width: 1360px) {
156
+        .main .main__content.main__content-wide {
157
+            padding-right: 0;
158
+        }
159
+    }
160
+
161
+    @media only screen and (min-width: 1600px) {
162
+        .main .main__content.main__content-wide {
163
+            width: 24cm;
164
+        }
165
+
166
+        .main .main__content.main__content-wide .main__content-inner {
167
+            width: auto;
168
+            margin: 0 50px;
169
+        }
170
+
171
+        /* Keep "page" look based on viewport width. */
172
+        .main__content-wide .document-editor__editable-container .document-editor__editable.ck-editor__editable {
173
+            width: 60%;
174
+        }
175
+    }
176
+	</style>
7 177
 </head>
8 178
 <body>
9
-    <h1>Document editor</h1>
10 179
 
11
-    <!-- The toolbar will be rendered in this container. -->
12
-    <div id="toolbar-container"></div>
180
+	<h1><span th:text="${heading}"></span></h1>
13 181
 
14
-    <!-- This container will become the editable. -->
15
-    <div id="editor">
16
-        <p>This is the initial editor content.</p>
182
+   <div class="document-editor">
183
+    <div class="document-editor__toolbar"></div>
184
+    <div class="document-editor__editable-container">
185
+        <div class="document-editor__editable">
186
+            Editor content is inserted here.
187
+        </div>
17 188
     </div>
189
+    </div>
190
+
191
+<!--
192
+	https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/ckbox.html
193
+-->
194
+<script src="https://cdn.ckbox.io/CKBox/1.3.2/ckbox.js"></script>
195
+<!--
196
+	The "super-build" of CKEditor 5 served via CDN contains a large set of plugins and multiple editor types.
197
+	See https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/quick-start.html#running-a-full-featured-editor-from-cdn
198
+-->
199
+<script src="https://cdn.ckeditor.com/ckeditor5/36.0.1/super-build/ckeditor.js"></script>
200
+<!--
201
+	Uncomment to load the Spanish translation
202
+<script src="https://cdn.ckeditor.com/ckeditor5/36.0.1/super-build/translations/es.js"></script>
203
+-->
204
+<script>
205
+    // This sample still does not showcase all CKEditor 5 features (!)
206
+    // Visit https://ckeditor.com/docs/ckeditor5/latest/features/index.html to browse all the features.
207
+    CKEDITOR.ClassicEditor.create( document.querySelector( '.document-editor__editable' ), {
208
+        // https://ckeditor.com/docs/ckeditor5/latest/features/toolbar/toolbar.html#extended-toolbar-configuration-format
209
+        toolbar: {
210
+            items: [
211
+                'ckbox', 'uploadImage', '|',
212
+                'exportPDF','exportWord', '|',
213
+                'importWord', '|',
214
+                'comment', 'trackChanges', 'revisionHistory', '|',
215
+                'findAndReplace', 'selectAll', '|',
216
+                'bold', 'italic', 'strikethrough', 'underline', 'removeFormat', '|',
217
+                'bulletedList', 'numberedList', 'todoList', '|',
218
+                'outdent', 'indent', '|',
219
+                'undo', 'redo',
220
+                '-',
221
+                'heading', '|',
222
+                'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'highlight', '|',
223
+                'alignment', '|',
224
+                'link', 'blockQuote', 'insertTable', 'mediaEmbed', 'codeBlock', 'htmlEmbed', '|',
225
+                'specialCharacters', 'horizontalLine', 'pageBreak', '|',
226
+                // Intentionally skipped buttons to keep the toolbar smaller, feel free to enable them:
227
+                // 'code', 'subscript', 'superscript', 'textPartLanguage', '|',
228
+                // ** To use source editing remember to disable real-time collaboration plugins **
229
+                // 'sourceEditing'
230
+            ],
231
+            shouldNotGroupWhenFull: true
232
+        },
233
+        // Changing the language of the interface requires loading the language file using the <script> tag.
234
+        // language: 'es',
235
+        list: {
236
+            properties: {
237
+                styles: true,
238
+                startIndex: true,
239
+                reversed: true
240
+            }
241
+        },
242
+        // https://ckeditor.com/docs/ckeditor5/latest/features/headings.html#configuration
243
+        heading: {
244
+            options: [
245
+                { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
246
+                { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
247
+                { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
248
+                { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
249
+                { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
250
+                { model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' },
251
+                { model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' }
252
+            ]
253
+        },
254
+        // https://ckeditor.com/docs/ckeditor5/latest/features/font.html#configuring-the-font-family-feature
255
+        fontFamily: {
256
+            options: [
257
+                'default',
258
+                'Arial, Helvetica, sans-serif',
259
+                'Courier New, Courier, monospace',
260
+                'Georgia, serif',
261
+                'Lucida Sans Unicode, Lucida Grande, sans-serif',
262
+                'Tahoma, Geneva, sans-serif',
263
+                'Times New Roman, Times, serif',
264
+                'Trebuchet MS, Helvetica, sans-serif',
265
+                'Verdana, Geneva, sans-serif'
266
+            ],
267
+            supportAllValues: true
268
+        },
269
+        // https://ckeditor.com/docs/ckeditor5/latest/features/font.html#configuring-the-font-size-feature
270
+        fontSize: {
271
+            options: [ 10, 12, 14, 'default', 18, 20, 22 ],
272
+            supportAllValues: true
273
+        },
274
+        // Be careful with the setting below. It instructs CKEditor to accept ALL HTML markup.
275
+        // https://ckeditor.com/docs/ckeditor5/latest/features/general-html-support.html#enabling-all-html-features
276
+        // htmlSupport: {
277
+        // 	allow: [
278
+        // 		{
279
+        // 			name: /.*/,
280
+        // 			attributes: true,
281
+        // 			classes: true,
282
+        // 			styles: true
283
+        // 		}
284
+        // 	]
285
+        // },
286
+        // Be careful with enabling previews
287
+        // https://ckeditor.com/docs/ckeditor5/latest/features/html-embed.html#content-previews
288
+        htmlEmbed: {
289
+            showPreviews: true
290
+        },
291
+        // https://ckeditor.com/docs/ckeditor5/latest/features/mentions.html#configuration
292
+        mention: {
293
+            feeds: [
294
+                {
295
+                    marker: '@',
296
+                    feed: [
297
+                        '@apple', '@bears', '@brownie', '@cake', '@cake', '@candy', '@canes', '@chocolate', '@cookie', '@cotton', '@cream',
298
+                        '@cupcake', '@danish', '@donut', '@dragée', '@fruitcake', '@gingerbread', '@gummi', '@ice', '@jelly-o',
299
+                        '@liquorice', '@macaroon', '@marzipan', '@oat', '@pie', '@plum', '@pudding', '@sesame', '@snaps', '@soufflé',
300
+                        '@sugar', '@sweet', '@topping', '@wafer'
301
+                    ],
302
+                    minimumCharacters: 1
303
+                }
304
+            ]
305
+        },
306
+        // https://ckeditor.com/docs/ckeditor5/latest/features/editor-placeholder.html#using-the-editor-configuration
307
+        placeholder: 'Welcome to CKEditor 5!',
308
+        // Used by real-time collaboration
309
+        cloudServices: {
310
+            // Be careful - do not use the development token endpoint on production systems!
311
+            tokenUrl: 'https://95909.cke-cs.com/token/dev/31dad7RDKRwJrbhYZUOta7rT67FW5j53zqFh?limit=10',
312
+            webSocketUrl: 'wss://95909.cke-cs.com/ws'
313
+        },
314
+        collaboration: {
315
+            // Modify the channelId to simulate editing different documents
316
+            // https://ckeditor.com/docs/ckeditor5/latest/features/collaboration/real-time-collaboration/real-time-collaboration-integration.html#the-channelid-configuration-property
317
+            channelId: 'document-id-2'
318
+        },
319
+        // https://ckeditor.com/docs/ckeditor5/latest/features/collaboration/annotations/annotations-custom-configuration.html#sidebar-configuration
320
+        sidebar: {
321
+            container: document.querySelector( '#sidebar' )
322
+        },
323
+        // https://ckeditor.com/docs/ckeditor5/latest/features/collaboration/real-time-collaboration/users-in-real-time-collaboration.html#users-presence-list
324
+        presenceList: {
325
+            container: document.querySelector( '#presence-list-container' )
326
+        },
327
+        // Add configuration for the comments editor if the Comments plugin is added.
328
+        // https://ckeditor.com/docs/ckeditor5/latest/features/collaboration/annotations/annotations-custom-configuration.html#comment-editor-configuration
329
+        /* comments: {
330
+            editorConfig: {
331
+                extraPlugins: CKEDITOR.ClassicEditor.builtinPlugins.filter( plugin => {
332
+                    // Use e.g. Ctrl+B in the comments editor to bold text.
333
+                    return [ 'Bold', 'Italic', 'Underline', 'List', 'Autoformat', 'Mention' ].includes( plugin.pluginName );
334
+                } ),
335
+                // Combine mentions + Webhooks to notify users about new comments
336
+                // https://ckeditor.com/docs/cs/latest/guides/webhooks/events.html
337
+                mention: {
338
+                    feeds: [
339
+                        {
340
+                            marker: '@',
341
+                            feed: [
342
+                                '@Baby Doe', '@Joe Doe', '@Jane Doe', '@Jane Roe', '@Richard Roe'
343
+                            ],
344
+                            minimumCharacters: 1
345
+                        }
346
+                    ]
347
+                },
348
+            }
349
+        }, */
350
+        // Do not include revision history configuration if you do not want to integrate it.
351
+        // Remember to remove the 'revisionHistory' button from the toolbar in such a case.
352
+        /* revisionHistory: {
353
+            editorContainer: document.querySelector( '#editor-container' ),
354
+            viewerContainer: document.querySelector( '#revision-viewer-container' ),
355
+            viewerEditorElement: document.querySelector( '#revision-viewer-editor' ),
356
+            viewerSidebarContainer: document.querySelector( '#revision-viewer-sidebar' ),
357
+        }, */
358
+        // https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/ckbox.html
359
+        ckbox: {
360
+            // Be careful - do not use the development token endpoint on production systems!
361
+            tokenUrl: 'https://95909.cke-cs.com/token/dev/31dad7RDKRwJrbhYZUOta7rT67FW5j53zqFh?limit=10'
362
+        },
363
+        // License key is required only by the Pagination plugin and non-realtime Comments/Track changes.
364
+        licenseKey: 'R6gmTn3ENgbwV0S8ykY5ECgcDEA+WXk+Ykv/bsGF4gRDWQ2wVNfaJHW50w==',
365
+        removePlugins: [
366
+            // Before enabling Pagination plugin, make sure to provide proper configuration and add relevant buttons to the toolbar
367
+            // https://ckeditor.com/docs/ckeditor5/latest/features/pagination/pagination.html
368
+            'Pagination',
369
+            // Intentionally disabled, file uploads are handled by CKBox
370
+            'Base64UploadAdapter',
371
+            // Intentionally disabled, file uploads are handled by CKBox
372
+            'CKFinder',
373
+            // Intentionally disabled, file uploads are handled by CKBox
374
+            'EasyImage',
375
+            // Requires additional license key
376
+            'WProofreader',
377
+            // Incompatible with real-time collaboration
378
+            'SourceEditing',
379
+            // Careful, with the Mathtype plugin CKEditor will not load when loading this sample
380
+            // from a local file system (file://) - load this site via HTTP server if you enable MathType
381
+            'MathType',
382
+            // If you would like to adjust enabled collaboration features:
383
+            'RealTimeCollaborativeComments',
384
+            'RealTimeCollaborativeTrackChanges',
385
+            'RealTimeCollaborativeRevisionHistory',
386
+            'PresenceList',
387
+            'Comments',
388
+            'TrackChanges',
389
+            'TrackChangesData',
390
+            'RevisionHistory'
391
+        ]
392
+    } )
393
+        .then( editor => {
394
+            window.editor = editor;
395
+
396
+            // Example implementation to switch between different types of annotations according to the window size.
397
+            // https://ckeditor.com/docs/ckeditor5/latest/features/collaboration/annotations/annotations-display-mode.html
398
+           /*  const annotationsUIs = editor.plugins.get( 'AnnotationsUIs' );
399
+            const sidebarElement = document.querySelector( '.sidebar' );
400
+            let currentWidth;
401
+
402
+            function refreshDisplayMode() {
403
+                // Check the window width to avoid the UI switching when the mobile keyboard shows up.
404
+                if ( window.innerWidth === currentWidth ) {
405
+                    return;
406
+                }
407
+                currentWidth = window.innerWidth;
408
+
409
+                if ( currentWidth < 1000 ) {
410
+                    sidebarElement.classList.remove( 'narrow' );
411
+                    sidebarElement.classList.add( 'hidden' );
412
+                    annotationsUIs.switchTo( 'inline' );
413
+                }
414
+                else if ( currentWidth < 1300 ) {
415
+                    sidebarElement.classList.remove( 'hidden' );
416
+                    sidebarElement.classList.add( 'narrow' );
417
+                    annotationsUIs.switchTo( 'narrowSidebar' );
418
+                }
419
+                else {
420
+                    sidebarElement.classList.remove( 'hidden', 'narrow' );
421
+                    annotationsUIs.switchTo( 'wideSidebar' );
422
+                }
423
+            }
424
+
425
+            editor.ui.view.listenTo( window, 'resize', refreshDisplayMode );
426
+            refreshDisplayMode(); */
427
+            const toolbarContainer = document.querySelector( '.document-editor__toolbar' );
18 428
 
19
-    <script>
20
-        DecoupledEditor
21
-            .create( document.querySelector( '#editor' ) )
22
-            .then( editor => {
23
-                const toolbarContainer = document.querySelector( '#toolbar-container' );
24
-
25
-                toolbarContainer.appendChild( editor.ui.view.toolbar.element );
26
-            } )
27
-            .catch( error => {
28
-                console.error( error );
29
-            } );
30
-    </script>
429
+            toolbarContainer.appendChild( editor.ui.view.toolbar.element );
430
+            
431
+            return editor;
432
+        } )
433
+        .catch( error => {
434
+            console.error( 'There was a problem initializing the editor.', error );
435
+        } );
436
+</script>
31 437
 </body>
32
-</html>
438
+</html>

+ 221 - 0
src/main/resources/templates/index.html.bak

@@ -0,0 +1,221 @@
1
+<!DOCTYPE html>
2
+<html lang="en">
3
+<head>
4
+    <meta charset="utf-8">
5
+    <title>CKEditor 5 – Document editor</title>
6
+    <script src="https://cdn.ckeditor.com/ckeditor5/35.4.0/decoupled-document/ckeditor.js"></script>
7
+    <!-- <script th:src="@{/ckeditor.js}"></script> -->
8
+</head>
9
+<body>
10
+    <h1>Document editor</h1>
11
+
12
+   <div class="document-editor">
13
+    <div class="document-editor__toolbar"></div>
14
+    <div class="document-editor__editable-container">
15
+        <div class="document-editor__editable">
16
+            Editor content is inserted here.
17
+        </div>
18
+    </div>
19
+</div>
20
+
21
+<style>
22
+    .document-editor {
23
+        border: 1px solid var(--ck-color-base-border);
24
+        border-radius: var(--ck-border-radius);
25
+
26
+        /* Set vertical boundaries for the document editor. */
27
+        max-height: 700px;
28
+
29
+        /* This element is a flex container for easier rendering. */
30
+        display: flex;
31
+        flex-flow: column nowrap;
32
+    }
33
+
34
+    .document-editor__toolbar {
35
+        /* Make sure the toolbar container is always above the editable. */
36
+        z-index: 1;
37
+
38
+        /* Create the illusion of the toolbar floating over the editable. */
39
+        box-shadow: 0 0 5px hsla( 0,0%,0%,.2 );
40
+
41
+        /* Use the CKEditor CSS variables to keep the UI consistent. */
42
+        border-bottom: 1px solid var(--ck-color-toolbar-border);
43
+    }
44
+
45
+    /* Adjust the look of the toolbar inside of the container. */
46
+    .document-editor__toolbar .ck-toolbar {
47
+        border: 0;
48
+        border-radius: 0;
49
+    }
50
+
51
+    /* Make the editable container look like the inside of a native word processor app. */
52
+    .document-editor__editable-container {
53
+        padding: calc( 2 * var(--ck-spacing-large) );
54
+        background: var(--ck-color-base-foreground);
55
+
56
+        /* Make it possible to scroll the "page" of the edited content. */
57
+        overflow-y: scroll;
58
+    }
59
+
60
+    .document-editor__editable-container .document-editor__editable.ck-editor__editable {
61
+        /* Set the dimensions of the "page". */
62
+        width: 15.8cm;
63
+        min-height: 21cm;
64
+
65
+        /* Keep the "page" off the boundaries of the container. */
66
+        padding: 1cm 2cm 2cm;
67
+
68
+        border: 1px hsl( 0,0%,82.7% ) solid;
69
+        border-radius: var(--ck-border-radius);
70
+        background: white;
71
+
72
+        /* The "page" should cast a slight shadow (3D illusion). */
73
+        box-shadow: 0 0 5px hsla( 0,0%,0%,.1 );
74
+
75
+        /* Center the "page". */
76
+        margin: 0 auto;
77
+    }
78
+
79
+    /* Override the page's width in the "Examples" section which is wider. */
80
+    .main__content-wide .document-editor__editable-container .document-editor__editable.ck-editor__editable {
81
+        width: 18cm;
82
+    }
83
+
84
+    /* Set the default font for the "page" of the content. */
85
+    .document-editor .ck-content,
86
+    .document-editor .ck-heading-dropdown .ck-list .ck-button__label {
87
+        font: 16px/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif;
88
+    }
89
+
90
+    /* Adjust the headings dropdown to host some larger heading styles. */
91
+    .document-editor .ck-heading-dropdown .ck-list .ck-button__label {
92
+        line-height: calc( 1.7 * var(--ck-line-height-base) * var(--ck-font-size-base) );
93
+        min-width: 6em;
94
+    }
95
+
96
+    /* Scale down all heading previews because they are way too big to be presented in the UI.
97
+    Preserve the relative scale, though. */
98
+    .document-editor .ck-heading-dropdown .ck-list .ck-heading_heading1 .ck-button__label,
99
+    .document-editor .ck-heading-dropdown .ck-list .ck-heading_heading2 .ck-button__label {
100
+        transform: scale(0.8);
101
+        transform-origin: left;
102
+    }
103
+
104
+    /* Set the styles for "Heading 1". */
105
+    .document-editor .ck-content h2,
106
+    .document-editor .ck-heading-dropdown .ck-heading_heading1 .ck-button__label {
107
+        font-size: 2.18em;
108
+        font-weight: normal;
109
+    }
110
+
111
+    .document-editor .ck-content h2 {
112
+        line-height: 1.37em;
113
+        padding-top: .342em;
114
+        margin-bottom: .142em;
115
+    }
116
+
117
+    /* Set the styles for "Heading 2". */
118
+    .document-editor .ck-content h3,
119
+    .document-editor .ck-heading-dropdown .ck-heading_heading2 .ck-button__label {
120
+        font-size: 1.75em;
121
+        font-weight: normal;
122
+        color: hsl( 203, 100%, 50% );
123
+    }
124
+
125
+    .document-editor .ck-heading-dropdown .ck-heading_heading2.ck-on .ck-button__label {
126
+        color: var(--ck-color-list-button-on-text);
127
+    }
128
+
129
+    /* Set the styles for "Heading 2". */
130
+    .document-editor .ck-content h3 {
131
+        line-height: 1.86em;
132
+        padding-top: .171em;
133
+        margin-bottom: .357em;
134
+    }
135
+
136
+    /* Set the styles for "Heading 3". */
137
+    .document-editor .ck-content h4,
138
+    .document-editor .ck-heading-dropdown .ck-heading_heading3 .ck-button__label {
139
+        font-size: 1.31em;
140
+        font-weight: bold;
141
+    }
142
+
143
+    .document-editor .ck-content h4 {
144
+        line-height: 1.24em;
145
+        padding-top: .286em;
146
+        margin-bottom: .952em;
147
+    }
148
+
149
+    /* Make the block quoted text serif with some additional spacing. */
150
+    .document-editor .ck-content blockquote {
151
+        font-family: Georgia, serif;
152
+        margin-left: calc( 2 * var(--ck-spacing-large) );
153
+        margin-right: calc( 2 * var(--ck-spacing-large) );
154
+    }
155
+
156
+    @media only screen and (max-width: 960px) {
157
+        /* Because on mobile 2cm paddings are to big. */
158
+        .document-editor__editable-container .document-editor__editable.ck-editor__editable {
159
+            padding: 1.5em;
160
+        }
161
+    }
162
+
163
+    @media only screen and (max-width: 1200px) {
164
+        .main__content-wide .document-editor__editable-container .document-editor__editable.ck-editor__editable {
165
+            width: 100%;
166
+        }
167
+    }
168
+
169
+    /* Style document editor a'ka Google Docs.*/
170
+    @media only screen and (min-width: 1360px) {
171
+        .main .main__content.main__content-wide {
172
+            padding-right: 0;
173
+        }
174
+    }
175
+
176
+    @media only screen and (min-width: 1600px) {
177
+        .main .main__content.main__content-wide {
178
+            width: 24cm;
179
+        }
180
+
181
+        .main .main__content.main__content-wide .main__content-inner {
182
+            width: auto;
183
+            margin: 0 50px;
184
+        }
185
+
186
+        /* Keep "page" look based on viewport width. */
187
+        .main__content-wide .document-editor__editable-container .document-editor__editable.ck-editor__editable {
188
+            width: 60%;
189
+        }
190
+    }
191
+</style>
192
+
193
+
194
+    <script>
195
+    
196
+    DecoupledEditor
197
+    .create( document.querySelector( '.document-editor__editable' ), {
198
+        cloudServices: {
199
+            // All predefined builds include the Easy Image feature.
200
+            // Provide correct configuration values to use it.
201
+             tokenUrl: 'https://95591.cke-cs.com/token/dev/KXsmgFFR0bgdv4h3A2Fu4Mvf6aa4Vd1bSSql?limit=10',
202
+             uploadUrl: 'https://95591.cke-cs.com/easyimage/upload/'
203
+            // Read more about Easy Image - https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/easy-image.html.
204
+            // For other image upload methods see the guide - https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/image-upload.html.
205
+        }
206
+    } )
207
+    .then( editor => {
208
+        const toolbarContainer = document.querySelector( '.document-editor__toolbar' );
209
+
210
+        toolbarContainer.appendChild( editor.ui.view.toolbar.element );
211
+
212
+        window.editor = editor;
213
+    } )
214
+    .catch( err => {
215
+        console.error( err );
216
+    } );
217
+    
218
+    
219
+    </script>
220
+</body>
221
+</html>

+ 437 - 0
src/main/resources/templates/index.html.bak2

@@ -0,0 +1,437 @@
1
+<!DOCTYPE html>
2
+<html lang="en">
3
+<head>
4
+    <meta charset="utf-8">
5
+    <title>CKEditor 5 – premium features sample</title>
6
+    <style>
7
+    .document-editor {
8
+        border: 1px solid var(--ck-color-base-border);
9
+        border-radius: var(--ck-border-radius);
10
+
11
+        /* Set vertical boundaries for the document editor. */
12
+        max-height: 700px;
13
+
14
+        /* This element is a flex container for easier rendering. */
15
+        display: flex;
16
+        flex-flow: column nowrap;
17
+    }
18
+
19
+    .document-editor__toolbar {
20
+        /* Make sure the toolbar container is always above the editable. */
21
+        z-index: 1;
22
+
23
+        /* Create the illusion of the toolbar floating over the editable. */
24
+        box-shadow: 0 0 5px hsla( 0,0%,0%,.2 );
25
+
26
+        /* Use the CKEditor CSS variables to keep the UI consistent. */
27
+        border-bottom: 1px solid var(--ck-color-toolbar-border);
28
+    }
29
+
30
+    /* Adjust the look of the toolbar inside of the container. */
31
+    .document-editor__toolbar .ck-toolbar {
32
+        border: 0;
33
+        border-radius: 0;
34
+    }
35
+
36
+    /* Make the editable container look like the inside of a native word processor app. */
37
+    .document-editor__editable-container {
38
+        padding: calc( 2 * var(--ck-spacing-large) );
39
+        background: var(--ck-color-base-foreground);
40
+
41
+        /* Make it possible to scroll the "page" of the edited content. */
42
+        overflow-y: scroll;
43
+    }
44
+
45
+    .document-editor__editable-container .document-editor__editable.ck-editor__editable {
46
+        /* Set the dimensions of the "page". */
47
+        width: 15.8cm;
48
+        min-height: 21cm;
49
+
50
+        /* Keep the "page" off the boundaries of the container. */
51
+        padding: 1cm 2cm 2cm;
52
+
53
+        border: 1px hsl( 0,0%,82.7% ) solid;
54
+        border-radius: var(--ck-border-radius);
55
+        background: white;
56
+
57
+        /* The "page" should cast a slight shadow (3D illusion). */
58
+        box-shadow: 0 0 5px hsla( 0,0%,0%,.1 );
59
+
60
+        /* Center the "page". */
61
+        margin: 0 auto;
62
+    }
63
+
64
+    /* Override the page's width in the "Examples" section which is wider. */
65
+    .main__content-wide .document-editor__editable-container .document-editor__editable.ck-editor__editable {
66
+        width: 18cm;
67
+    }
68
+
69
+    /* Set the default font for the "page" of the content. */
70
+    .document-editor .ck-content,
71
+    .document-editor .ck-heading-dropdown .ck-list .ck-button__label {
72
+        font: 16px/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif;
73
+    }
74
+
75
+    /* Adjust the headings dropdown to host some larger heading styles. */
76
+    .document-editor .ck-heading-dropdown .ck-list .ck-button__label {
77
+        line-height: calc( 1.7 * var(--ck-line-height-base) * var(--ck-font-size-base) );
78
+        min-width: 6em;
79
+    }
80
+
81
+    /* Scale down all heading previews because they are way too big to be presented in the UI.
82
+    Preserve the relative scale, though. */
83
+    .document-editor .ck-heading-dropdown .ck-list .ck-heading_heading1 .ck-button__label,
84
+    .document-editor .ck-heading-dropdown .ck-list .ck-heading_heading2 .ck-button__label {
85
+        transform: scale(0.8);
86
+        transform-origin: left;
87
+    }
88
+
89
+    /* Set the styles for "Heading 1". */
90
+    .document-editor .ck-content h2,
91
+    .document-editor .ck-heading-dropdown .ck-heading_heading1 .ck-button__label {
92
+        font-size: 2.18em;
93
+        font-weight: normal;
94
+    }
95
+
96
+    .document-editor .ck-content h2 {
97
+        line-height: 1.37em;
98
+        padding-top: .342em;
99
+        margin-bottom: .142em;
100
+    }
101
+
102
+    /* Set the styles for "Heading 2". */
103
+    .document-editor .ck-content h3,
104
+    .document-editor .ck-heading-dropdown .ck-heading_heading2 .ck-button__label {
105
+        font-size: 1.75em;
106
+        font-weight: normal;
107
+        color: hsl( 203, 100%, 50% );
108
+    }
109
+
110
+    .document-editor .ck-heading-dropdown .ck-heading_heading2.ck-on .ck-button__label {
111
+        color: var(--ck-color-list-button-on-text);
112
+    }
113
+
114
+    /* Set the styles for "Heading 2". */
115
+    .document-editor .ck-content h3 {
116
+        line-height: 1.86em;
117
+        padding-top: .171em;
118
+        margin-bottom: .357em;
119
+    }
120
+
121
+    /* Set the styles for "Heading 3". */
122
+    .document-editor .ck-content h4,
123
+    .document-editor .ck-heading-dropdown .ck-heading_heading3 .ck-button__label {
124
+        font-size: 1.31em;
125
+        font-weight: bold;
126
+    }
127
+
128
+    .document-editor .ck-content h4 {
129
+        line-height: 1.24em;
130
+        padding-top: .286em;
131
+        margin-bottom: .952em;
132
+    }
133
+
134
+    /* Make the block quoted text serif with some additional spacing. */
135
+    .document-editor .ck-content blockquote {
136
+        font-family: Georgia, serif;
137
+        margin-left: calc( 2 * var(--ck-spacing-large) );
138
+        margin-right: calc( 2 * var(--ck-spacing-large) );
139
+    }
140
+
141
+    @media only screen and (max-width: 960px) {
142
+        /* Because on mobile 2cm paddings are to big. */
143
+        .document-editor__editable-container .document-editor__editable.ck-editor__editable {
144
+            padding: 1.5em;
145
+        }
146
+    }
147
+
148
+    @media only screen and (max-width: 1200px) {
149
+        .main__content-wide .document-editor__editable-container .document-editor__editable.ck-editor__editable {
150
+            width: 100%;
151
+        }
152
+    }
153
+
154
+    /* Style document editor a'ka Google Docs.*/
155
+    @media only screen and (min-width: 1360px) {
156
+        .main .main__content.main__content-wide {
157
+            padding-right: 0;
158
+        }
159
+    }
160
+
161
+    @media only screen and (min-width: 1600px) {
162
+        .main .main__content.main__content-wide {
163
+            width: 24cm;
164
+        }
165
+
166
+        .main .main__content.main__content-wide .main__content-inner {
167
+            width: auto;
168
+            margin: 0 50px;
169
+        }
170
+
171
+        /* Keep "page" look based on viewport width. */
172
+        .main__content-wide .document-editor__editable-container .document-editor__editable.ck-editor__editable {
173
+            width: 60%;
174
+        }
175
+    }
176
+	</style>
177
+</head>
178
+<body>
179
+
180
+	<h1>Document editor</h1>
181
+
182
+   <div class="document-editor">
183
+    <div class="document-editor__toolbar"></div>
184
+    <div class="document-editor__editable-container">
185
+        <div class="document-editor__editable">
186
+            Editor content is inserted here.
187
+        </div>
188
+    </div>
189
+    </div>
190
+
191
+<!--
192
+	https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/ckbox.html
193
+-->
194
+<script src="https://cdn.ckbox.io/CKBox/1.3.2/ckbox.js"></script>
195
+<!--
196
+	The "super-build" of CKEditor 5 served via CDN contains a large set of plugins and multiple editor types.
197
+	See https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/quick-start.html#running-a-full-featured-editor-from-cdn
198
+-->
199
+<script src="https://cdn.ckeditor.com/ckeditor5/36.0.1/super-build/ckeditor.js"></script>
200
+<!--
201
+	Uncomment to load the Spanish translation
202
+<script src="https://cdn.ckeditor.com/ckeditor5/36.0.1/super-build/translations/es.js"></script>
203
+-->
204
+<script>
205
+    // This sample still does not showcase all CKEditor 5 features (!)
206
+    // Visit https://ckeditor.com/docs/ckeditor5/latest/features/index.html to browse all the features.
207
+    CKEDITOR.ClassicEditor.create( document.querySelector( '.document-editor__editable' ), {
208
+        // https://ckeditor.com/docs/ckeditor5/latest/features/toolbar/toolbar.html#extended-toolbar-configuration-format
209
+        toolbar: {
210
+            items: [
211
+                'ckbox', 'uploadImage', '|',
212
+                'exportPDF','exportWord', '|',
213
+                'comment', 'trackChanges', 'revisionHistory', '|',
214
+                'findAndReplace', 'selectAll', '|',
215
+                'bold', 'italic', 'strikethrough', 'underline', 'removeFormat', '|',
216
+                'bulletedList', 'numberedList', 'todoList', '|',
217
+                'outdent', 'indent', '|',
218
+                'undo', 'redo',
219
+                '-',
220
+                'heading', '|',
221
+                'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'highlight', '|',
222
+                'alignment', '|',
223
+                'link', 'blockQuote', 'insertTable', 'mediaEmbed', 'codeBlock', 'htmlEmbed', '|',
224
+                'specialCharacters', 'horizontalLine', 'pageBreak', '|',
225
+                // Intentionally skipped buttons to keep the toolbar smaller, feel free to enable them:
226
+                // 'code', 'subscript', 'superscript', 'textPartLanguage', '|',
227
+                // ** To use source editing remember to disable real-time collaboration plugins **
228
+                // 'sourceEditing'
229
+            ],
230
+            shouldNotGroupWhenFull: true
231
+        },
232
+        // Changing the language of the interface requires loading the language file using the <script> tag.
233
+        // language: 'es',
234
+        list: {
235
+            properties: {
236
+                styles: true,
237
+                startIndex: true,
238
+                reversed: true
239
+            }
240
+        },
241
+        // https://ckeditor.com/docs/ckeditor5/latest/features/headings.html#configuration
242
+        heading: {
243
+            options: [
244
+                { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
245
+                { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
246
+                { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
247
+                { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
248
+                { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
249
+                { model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' },
250
+                { model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' }
251
+            ]
252
+        },
253
+        // https://ckeditor.com/docs/ckeditor5/latest/features/font.html#configuring-the-font-family-feature
254
+        fontFamily: {
255
+            options: [
256
+                'default',
257
+                'Arial, Helvetica, sans-serif',
258
+                'Courier New, Courier, monospace',
259
+                'Georgia, serif',
260
+                'Lucida Sans Unicode, Lucida Grande, sans-serif',
261
+                'Tahoma, Geneva, sans-serif',
262
+                'Times New Roman, Times, serif',
263
+                'Trebuchet MS, Helvetica, sans-serif',
264
+                'Verdana, Geneva, sans-serif'
265
+            ],
266
+            supportAllValues: true
267
+        },
268
+        // https://ckeditor.com/docs/ckeditor5/latest/features/font.html#configuring-the-font-size-feature
269
+        fontSize: {
270
+            options: [ 10, 12, 14, 'default', 18, 20, 22 ],
271
+            supportAllValues: true
272
+        },
273
+        // Be careful with the setting below. It instructs CKEditor to accept ALL HTML markup.
274
+        // https://ckeditor.com/docs/ckeditor5/latest/features/general-html-support.html#enabling-all-html-features
275
+        // htmlSupport: {
276
+        // 	allow: [
277
+        // 		{
278
+        // 			name: /.*/,
279
+        // 			attributes: true,
280
+        // 			classes: true,
281
+        // 			styles: true
282
+        // 		}
283
+        // 	]
284
+        // },
285
+        // Be careful with enabling previews
286
+        // https://ckeditor.com/docs/ckeditor5/latest/features/html-embed.html#content-previews
287
+        htmlEmbed: {
288
+            showPreviews: true
289
+        },
290
+        // https://ckeditor.com/docs/ckeditor5/latest/features/mentions.html#configuration
291
+        mention: {
292
+            feeds: [
293
+                {
294
+                    marker: '@',
295
+                    feed: [
296
+                        '@apple', '@bears', '@brownie', '@cake', '@cake', '@candy', '@canes', '@chocolate', '@cookie', '@cotton', '@cream',
297
+                        '@cupcake', '@danish', '@donut', '@dragée', '@fruitcake', '@gingerbread', '@gummi', '@ice', '@jelly-o',
298
+                        '@liquorice', '@macaroon', '@marzipan', '@oat', '@pie', '@plum', '@pudding', '@sesame', '@snaps', '@soufflé',
299
+                        '@sugar', '@sweet', '@topping', '@wafer'
300
+                    ],
301
+                    minimumCharacters: 1
302
+                }
303
+            ]
304
+        },
305
+        // https://ckeditor.com/docs/ckeditor5/latest/features/editor-placeholder.html#using-the-editor-configuration
306
+        placeholder: 'Welcome to CKEditor 5!',
307
+        // Used by real-time collaboration
308
+        cloudServices: {
309
+            // Be careful - do not use the development token endpoint on production systems!
310
+            tokenUrl: 'https://95909.cke-cs.com/token/dev/31dad7RDKRwJrbhYZUOta7rT67FW5j53zqFh?limit=10',
311
+            webSocketUrl: 'wss://95909.cke-cs.com/ws'
312
+        },
313
+        collaboration: {
314
+            // Modify the channelId to simulate editing different documents
315
+            // https://ckeditor.com/docs/ckeditor5/latest/features/collaboration/real-time-collaboration/real-time-collaboration-integration.html#the-channelid-configuration-property
316
+            channelId: 'document-id-2'
317
+        },
318
+        // https://ckeditor.com/docs/ckeditor5/latest/features/collaboration/annotations/annotations-custom-configuration.html#sidebar-configuration
319
+        sidebar: {
320
+            container: document.querySelector( '#sidebar' )
321
+        },
322
+        // https://ckeditor.com/docs/ckeditor5/latest/features/collaboration/real-time-collaboration/users-in-real-time-collaboration.html#users-presence-list
323
+        presenceList: {
324
+            container: document.querySelector( '#presence-list-container' )
325
+        },
326
+        // Add configuration for the comments editor if the Comments plugin is added.
327
+        // https://ckeditor.com/docs/ckeditor5/latest/features/collaboration/annotations/annotations-custom-configuration.html#comment-editor-configuration
328
+        /* comments: {
329
+            editorConfig: {
330
+                extraPlugins: CKEDITOR.ClassicEditor.builtinPlugins.filter( plugin => {
331
+                    // Use e.g. Ctrl+B in the comments editor to bold text.
332
+                    return [ 'Bold', 'Italic', 'Underline', 'List', 'Autoformat', 'Mention' ].includes( plugin.pluginName );
333
+                } ),
334
+                // Combine mentions + Webhooks to notify users about new comments
335
+                // https://ckeditor.com/docs/cs/latest/guides/webhooks/events.html
336
+                mention: {
337
+                    feeds: [
338
+                        {
339
+                            marker: '@',
340
+                            feed: [
341
+                                '@Baby Doe', '@Joe Doe', '@Jane Doe', '@Jane Roe', '@Richard Roe'
342
+                            ],
343
+                            minimumCharacters: 1
344
+                        }
345
+                    ]
346
+                },
347
+            }
348
+        }, */
349
+        // Do not include revision history configuration if you do not want to integrate it.
350
+        // Remember to remove the 'revisionHistory' button from the toolbar in such a case.
351
+        /* revisionHistory: {
352
+            editorContainer: document.querySelector( '#editor-container' ),
353
+            viewerContainer: document.querySelector( '#revision-viewer-container' ),
354
+            viewerEditorElement: document.querySelector( '#revision-viewer-editor' ),
355
+            viewerSidebarContainer: document.querySelector( '#revision-viewer-sidebar' ),
356
+        }, */
357
+        // https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/ckbox.html
358
+        ckbox: {
359
+            // Be careful - do not use the development token endpoint on production systems!
360
+            tokenUrl: 'https://95909.cke-cs.com/token/dev/31dad7RDKRwJrbhYZUOta7rT67FW5j53zqFh?limit=10'
361
+        },
362
+        // License key is required only by the Pagination plugin and non-realtime Comments/Track changes.
363
+        licenseKey: 'R6gmTn3ENgbwV0S8ykY5ECgcDEA+WXk+Ykv/bsGF4gRDWQ2wVNfaJHW50w==',
364
+        removePlugins: [
365
+            // Before enabling Pagination plugin, make sure to provide proper configuration and add relevant buttons to the toolbar
366
+            // https://ckeditor.com/docs/ckeditor5/latest/features/pagination/pagination.html
367
+            'Pagination',
368
+            // Intentionally disabled, file uploads are handled by CKBox
369
+            'Base64UploadAdapter',
370
+            // Intentionally disabled, file uploads are handled by CKBox
371
+            'CKFinder',
372
+            // Intentionally disabled, file uploads are handled by CKBox
373
+            'EasyImage',
374
+            // Requires additional license key
375
+            'WProofreader',
376
+            // Incompatible with real-time collaboration
377
+            'SourceEditing',
378
+            // Careful, with the Mathtype plugin CKEditor will not load when loading this sample
379
+            // from a local file system (file://) - load this site via HTTP server if you enable MathType
380
+            'MathType',
381
+            // If you would like to adjust enabled collaboration features:
382
+            'RealTimeCollaborativeComments',
383
+            'RealTimeCollaborativeTrackChanges',
384
+            'RealTimeCollaborativeRevisionHistory',
385
+            'PresenceList',
386
+            'Comments',
387
+            'TrackChanges',
388
+            'TrackChangesData',
389
+            'RevisionHistory'
390
+        ]
391
+    } )
392
+        .then( editor => {
393
+            window.editor = editor;
394
+
395
+            // Example implementation to switch between different types of annotations according to the window size.
396
+            // https://ckeditor.com/docs/ckeditor5/latest/features/collaboration/annotations/annotations-display-mode.html
397
+           /*  const annotationsUIs = editor.plugins.get( 'AnnotationsUIs' );
398
+            const sidebarElement = document.querySelector( '.sidebar' );
399
+            let currentWidth;
400
+
401
+            function refreshDisplayMode() {
402
+                // Check the window width to avoid the UI switching when the mobile keyboard shows up.
403
+                if ( window.innerWidth === currentWidth ) {
404
+                    return;
405
+                }
406
+                currentWidth = window.innerWidth;
407
+
408
+                if ( currentWidth < 1000 ) {
409
+                    sidebarElement.classList.remove( 'narrow' );
410
+                    sidebarElement.classList.add( 'hidden' );
411
+                    annotationsUIs.switchTo( 'inline' );
412
+                }
413
+                else if ( currentWidth < 1300 ) {
414
+                    sidebarElement.classList.remove( 'hidden' );
415
+                    sidebarElement.classList.add( 'narrow' );
416
+                    annotationsUIs.switchTo( 'narrowSidebar' );
417
+                }
418
+                else {
419
+                    sidebarElement.classList.remove( 'hidden', 'narrow' );
420
+                    annotationsUIs.switchTo( 'wideSidebar' );
421
+                }
422
+            }
423
+
424
+            editor.ui.view.listenTo( window, 'resize', refreshDisplayMode );
425
+            refreshDisplayMode(); */
426
+            const toolbarContainer = document.querySelector( '.document-editor__toolbar' );
427
+
428
+            toolbarContainer.appendChild( editor.ui.view.toolbar.element );
429
+            
430
+            return editor;
431
+        } )
432
+        .catch( error => {
433
+            console.error( 'There was a problem initializing the editor.', error );
434
+        } );
435
+</script>
436
+</body>
437
+</html>