summaryrefslogtreecommitdiff
path: root/lib/ckeditor5/sample
diff options
context:
space:
mode:
authorpolo <ordipolo@gmx.fr>2021-04-20 21:46:33 +0200
committerpolo <ordipolo@gmx.fr>2021-04-20 21:46:33 +0200
commit87798e5554eb0330cd2de255e5034f0472d410a4 (patch)
treeacd9e26a7d912c7575cb6dd1c7b42cc3e9f52993 /lib/ckeditor5/sample
downloadmelaine-87798e5554eb0330cd2de255e5034f0472d410a4.zip
mot de passe
Diffstat (limited to 'lib/ckeditor5/sample')
-rw-r--r--lib/ckeditor5/sample/index.html164
-rw-r--r--lib/ckeditor5/sample/styles.css465
2 files changed, 629 insertions, 0 deletions
diff --git a/lib/ckeditor5/sample/index.html b/lib/ckeditor5/sample/index.html
new file mode 100644
index 0000000..0193081
--- /dev/null
+++ b/lib/ckeditor5/sample/index.html
@@ -0,0 +1,164 @@
1<!DOCTYPE html><!--
2 Copyright (c) 2014-2021, CKSource - Frederico Knabben. All rights reserved.
3 This file is licensed under the terms of the MIT License (see LICENSE.md).
4-->
5
6<html lang="en" dir="ltr"></html>
7<head>
8 <title>CKEditor 5 ClassicEditor build</title>
9 <meta charset="UTF-8">
10 <meta name="viewport" content="width=device-width, initial-scale=1">
11 <link rel="icon" type="image/png" href="https://c.cksource.com/a/1/logos/ckeditor5.png">
12 <link rel="stylesheet" type="text/css" href="styles.css">
13</head>
14<body data-editor="ClassicEditor" data-collaboration="false">
15 <header>
16 <div class="centered">
17 <h1><a href="https://ckeditor.com/ckeditor-5/" target="_blank" rel="noopener noreferrer"><img src="https://c.cksource.com/a/1/logos/ckeditor5.svg" alt="CKEditor 5 logo">CKEditor 5</a></h1>
18 <nav>
19 <ul>
20 <li><a href="https://ckeditor.com/docs/ckeditor5/" target="_blank" rel="noopener noreferrer">Documentation</a></li>
21 <li><a href="https://ckeditor.com/" target="_blank" rel="noopener noreferrer">Website</a></li>
22 </ul>
23 </nav>
24 </div>
25 </header>
26 <main>
27 <div class="message">
28 <div class="centered">
29 <h2>CKEditor 5 online builder demo - ClassicEditor build</h2>
30 </div>
31 </div>
32 <div class="centered">
33 <div class="row row-editor">
34 <div class="editor">
35 <h2>Bilingual Personality Disorder</h2>
36 <figure class="image image-style-side"><img src="https://c.cksource.com/a/1/img/docs/sample-image-bilingual-personality-disorder.jpg">
37 <figcaption>One language, one person.</figcaption>
38 </figure>
39 <p>
40 This may be the first time you hear about this made-up disorder but
41 it actually isn’t so far from the truth. Even the studies that were conducted almost half a century show that
42 <strong>the language you speak has more effects on you than you realise</strong>.
43 </p>
44 <p>
45 One of the very first experiments conducted on this topic dates back to 1964.
46 <a href="https://www.researchgate.net/publication/9440038_Language_and_TAT_content_in_bilinguals">In the experiment</a>
47 designed by linguist Ervin-Tripp who is an authority expert in psycholinguistic and sociolinguistic studies,
48 adults who are bilingual in English in French were showed series of pictures and were asked to create 3-minute stories.
49 In the end participants emphasized drastically different dynamics for stories in English and French.
50 </p>
51 <p>
52 Another ground-breaking experiment which included bilingual Japanese women married to American men in San Francisco were
53 asked to complete sentences. The goal of the experiment was to investigate whether or not human feelings and thoughts
54 are expressed differently in <strong>different language mindsets</strong>.
55 <Here>is a sample from the the experiment:</Here>
56 </p>
57 <table>
58 <thead>
59 <tr>
60 <th></th>
61 <th>English</th>
62 <th>Japanese</th>
63 </tr>
64 </thead>
65 <tbody>
66 <tr>
67 <td>Real friends should</td>
68 <td>Be very frank</td>
69 <td>Help each other</td>
70 </tr>
71 <tr>
72 <td>I will probably become</td>
73 <td>A teacher</td>
74 <td>A housewife</td>
75 </tr>
76 <tr>
77 <td>When there is a conflict with family</td>
78 <td>I do what I want</td>
79 <td>It's a time of great unhappiness</td>
80 </tr>
81 </tbody>
82 </table>
83 <p>
84 More recent <a href="https://books.google.pl/books?id=1LMhWGHGkRUC">studies</a> show, the language a person speaks affects
85 their cognition, behaviour, emotions and hence <strong>their personality</strong>.
86 This shouldn’t come as a surprise
87 <a href="https://en.wikipedia.org/wiki/Lateralization_of_brain_function">since we already know</a> that different regions
88 of the brain become more active depending on the person’s activity at hand. Since structure, information and especially
89 <strong>the culture</strong> of languages varies substantially and the language a person speaks is an essential element of daily life.
90 </p>
91 </div>
92 </div></div>
93 </div>
94 </main>
95 <footer>
96 <p><a href="https://ckeditor.com/ckeditor-5/" target="_blank" rel="noopener">CKEditor 5</a>
97 – Rich text editor of tomorrow, available today
98 </p>
99 <p>Copyright © 2003-2021,
100 <a href="https://cksource.com/" target="_blank" rel="noopener">CKSource</a>
101 – Frederico Knabben. All rights reserved.
102 </p>
103 </footer>
104 <script src="../build/ckeditor.js"></script>
105 <script>ClassicEditor
106 .create( document.querySelector( '.editor' ), {
107
108 toolbar: {
109 items: [
110 'heading',
111 '|',
112 'bold',
113 'italic',
114 'link',
115 'bulletedList',
116 'numberedList',
117 '|',
118 'imageUpload',
119 'blockQuote',
120 'insertTable',
121 'undo',
122 'redo'
123 ]
124 },
125 language: 'fr',
126 image: {
127 toolbar: [
128 'imageTextAlternative',
129 'imageStyle:full',
130 'imageStyle:side',
131 'linkImage'
132 ]
133 },
134 table: {
135 contentToolbar: [
136 'tableColumn',
137 'tableRow',
138 'mergeTableCells',
139 'tableProperties'
140 ]
141 },
142 licenseKey: '',
143
144
145 } )
146 .then( editor => {
147 window.editor = editor;
148
149
150
151
152
153
154
155
156 } )
157 .catch( error => {
158 console.error( 'Oops, something went wrong!' );
159 console.error( 'Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:' );
160 console.warn( 'Build id: aovpauzd25hi-dqoovaepm42n' );
161 console.error( error );
162 } );
163 </script>
164</body> \ No newline at end of file
diff --git a/lib/ckeditor5/sample/styles.css b/lib/ckeditor5/sample/styles.css
new file mode 100644
index 0000000..a882e34
--- /dev/null
+++ b/lib/ckeditor5/sample/styles.css
@@ -0,0 +1,465 @@
1/**
2 * @license Copyright (c) 2014-2021, CKSource - Frederico Knabben. All rights reserved.
3 * This file is licensed under the terms of the MIT License (see LICENSE.md).
4 */
5
6 :root {
7 --ck-sample-base-spacing: 2em;
8 --ck-sample-color-white: #fff;
9 --ck-sample-color-green: #279863;
10 --ck-sample-color-blue: #1a9aef;
11 --ck-sample-container-width: 1285px;
12 --ck-sample-sidebar-width: 350px;
13 --ck-sample-editor-min-height: 400px;
14 --ck-sample-editor-z-index: 10;
15}
16
17/* --------- EDITOR STYLES ---------------------------------------------------------------------------------------- */
18
19.editor__editable,
20/* Classic build. */
21main .ck-editor[role='application'] .ck.ck-content,
22/* Decoupled document build. */
23.ck.editor__editable[role='textbox'],
24.ck.ck-editor__editable[role='textbox'],
25/* Inline & Balloon build. */
26.ck.editor[role='textbox'] {
27 width: 100%;
28 background: #fff;
29 font-size: 1em;
30 line-height: 1.6em;
31 min-height: var(--ck-sample-editor-min-height);
32 padding: 1.5em 2em;
33}
34
35.ck.ck-editor__editable {
36 background: #fff;
37 border: 1px solid hsl(0, 0%, 70%);
38 width: 100%;
39}
40
41.ck.ck-editor {
42 /* To enable toolbar wrapping. */
43 width: 100%;
44 overflow-x: hidden;
45}
46
47/* Because of sidebar `position: relative`, Edge is overriding the outline of a focused editor. */
48.ck.ck-editor__editable {
49 position: relative;
50 z-index: var(--ck-sample-editor-z-index);
51}
52
53/* --------- DECOUPLED (DOCUMENT) BUILD. ---------------------------------------------*/
54body[data-editor='DecoupledDocumentEditor'] .document-editor__toolbar {
55 width: 100%;
56}
57
58body[ data-editor='DecoupledDocumentEditor'] .collaboration-demo__editable,
59body[ data-editor='DecoupledDocumentEditor'] .row-editor .editor {
60 width: 18.5cm;
61 height: 100%;
62 min-height: 26.25cm;
63 padding: 1.75cm 1.5cm;
64 margin: 2.5rem;
65 border: 1px hsl( 0, 0%, 82.7% ) solid;
66 background-color: var(--ck-sample-color-white);
67 box-shadow: 0 0 5px hsla( 0, 0%, 0%, .1 );
68}
69
70body[ data-editor='DecoupledDocumentEditor'] .row-editor {
71 display: flex;
72 position: relative;
73 justify-content: center;
74 overflow-y: auto;
75 background-color: #f2f2f2;
76 border: 1px solid hsl(0, 0%, 77%);
77}
78
79body[data-editor='DecoupledDocumentEditor'] .sidebar {
80 background: transparent;
81 border: 0;
82 box-shadow: none;
83}
84
85/* --------- COMMENTS & TRACK CHANGES FEATURE ---------------------------------------------------------------------- */
86.sidebar {
87 padding: 0 15px;
88 position: relative;
89 min-width: var(--ck-sample-sidebar-width);
90 max-width: var(--ck-sample-sidebar-width);
91 font-size: 20px;
92 border: 1px solid hsl(0, 0%, 77%);
93 background: hsl(0, 0%, 98%);
94 border-left: 0;
95 overflow: hidden;
96 min-height: 100%;
97 flex-grow: 1;
98}
99
100/* Do not inherit styles related to the editable editor content. See line 25.*/
101.sidebar .ck-content[role='textbox'],
102.ck.ck-annotation-wrapper .ck-content[role='textbox'] {
103 min-height: unset;
104 width: unset;
105 padding: 0;
106 background: transparent;
107}
108
109.sidebar.narrow {
110 min-width: 60px;
111 flex-grow: 0;
112}
113
114.sidebar.hidden {
115 display: none !important;
116}
117
118#sidebar-display-toggle {
119 position: absolute;
120 z-index: 1;
121 width: 30px;
122 height: 30px;
123 text-align: center;
124 left: 15px;
125 top: 30px;
126 border: 0;
127 padding: 0;
128 color: hsl( 0, 0%, 50% );
129 transition: 250ms ease color;
130 background-color: transparent;
131}
132
133#sidebar-display-toggle:hover {
134 color: hsl( 0, 0%, 30% );
135 cursor: pointer;
136}
137
138#sidebar-display-toggle:focus,
139#sidebar-display-toggle:active {
140 outline: none;
141 border: 1px solid #a9d29d;
142}
143
144#sidebar-display-toggle svg {
145 fill: currentColor;
146}
147
148/* --------- COLLABORATION FEATURES (USERS) ------------------------------------------------------------------------ */
149.row-presence {
150 width: 100%;
151 border: 1px solid hsl(0, 0%, 77%);
152 border-bottom: 0;
153 background: hsl(0, 0%, 98%);
154 padding: var(--ck-spacing-small);
155
156 /* Make `border-bottom` as `box-shadow` to not overlap with the editor border. */
157 box-shadow: 0 1px 0 0 hsl(0, 0%, 77%);
158
159 /* Make `z-index` bigger than `.editor` to properly display tooltips. */
160 z-index: 20;
161}
162
163.ck.ck-presence-list {
164 flex: 1;
165 padding: 1.25rem .75rem;
166}
167
168.presence .ck.ck-presence-list__counter {
169 order: 2;
170 margin-left: var(--ck-spacing-large)
171}
172
173/* --------- REAL TIME COLLABORATION FEATURES (SHARE TOPBAR CONTAINER) --------------------------------------------- */
174.collaboration-demo__row {
175 display: flex;
176 position: relative;
177 justify-content: center;
178 overflow-y: auto;
179 background-color: #f2f2f2;
180 border: 1px solid hsl(0, 0%, 77%);
181}
182
183body[ data-editor='InlineEditor'] .collaboration-demo__row {
184 border: 0;
185}
186
187.collaboration-demo__container {
188 max-width: var(--ck-sample-container-width);
189 margin: 0 auto;
190 padding: 1.25rem;
191}
192
193.presence, .collaboration-demo__row {
194 transition: .2s opacity;
195}
196
197.collaboration-demo__topbar {
198 background: #fff;
199 border: 1px solid var(--ck-color-toolbar-border);
200 display: flex;
201 justify-content: space-between;
202 align-items: center;
203 border-bottom: 0;
204 border-radius: 4px 4px 0 0;
205}
206
207.collaboration-demo__topbar .btn {
208 margin-right: 1em;
209 outline-offset: 2px;
210 outline-width: 2px;
211 background-color: var( --ck-sample-color-blue );
212}
213
214.collaboration-demo__topbar .btn:focus,
215.collaboration-demo__topbar .btn:hover {
216 border-color: var( --ck-sample-color-blue );
217}
218
219.collaboration-demo__share {
220 display: flex;
221 align-items: center;
222 padding: 1.25rem .75rem
223}
224
225.collaboration-demo__share-description p {
226 margin: 0;
227 font-weight: bold;
228 font-size: 0.9em;
229}
230
231.collaboration-demo__share input {
232 height: auto;
233 font-size: 0.9em;
234 min-width: 220px;
235 margin: 0 10px;
236 border-radius: 4px;
237 border: 1px solid var(--ck-color-toolbar-border)
238}
239
240.collaboration-demo__share button,
241.collaboration-demo__share input {
242 height: 40px;
243 padding: 5px 10px;
244}
245
246.collaboration-demo__share button {
247 position: relative;
248}
249
250.collaboration-demo__share button:focus {
251 outline: none;
252}
253
254.collaboration-demo__share button[data-tooltip]::before,
255.collaboration-demo__share button[data-tooltip]::after {
256 position: absolute;
257 visibility: hidden;
258 opacity: 0;
259 pointer-events: none;
260 transition: all .15s cubic-bezier(.5,1,.25,1);
261 z-index: 1;
262}
263
264.collaboration-demo__share button[data-tooltip]::before {
265 content: attr(data-tooltip);
266 padding: 5px 15px;
267 border-radius: 3px;
268 background: #111;
269 color: #fff;
270 text-align: center;
271 font-size: 11px;
272 top: 100%;
273 left: 50%;
274 margin-top: 5px;
275 transform: translateX(-50%);
276}
277
278.collaboration-demo__share button[data-tooltip]::after {
279 content: '';
280 border: 5px solid transparent;
281 width: 0;
282 font-size: 0;
283 line-height: 0;
284 top: 100%;
285 left: 50%;
286 transform: translateX(-50%);
287 border-bottom: 5px solid #111;
288 border-top: none;
289}
290
291.collaboration-demo__share button[data-tooltip]:hover:before,
292.collaboration-demo__share button[data-tooltip]:hover:after {
293 visibility: visible;
294 opacity: 1;
295}
296
297.collaboration-demo--ready {
298 overflow: visible;
299 height: auto;
300}
301
302.collaboration-demo--ready .presence,
303.collaboration-demo--ready .collaboration-demo__row {
304 opacity: 1;
305}
306
307/* --------- PAGINATION FEATURE ------------------------------------------------------------------------------------ */
308
309/* Pagination view line must be stacked at least at the same level as the editor,
310 otherwise it will be hidden underneath. */
311.ck.ck-pagination-view-line {
312 z-index: var(--ck-sample-editor-z-index);
313}
314
315/* --------- SAMPLE GENERIC STYLES (not related to CKEditor) ------------------------------------------------------- */
316body, html {
317 padding: 0;
318 margin: 0;
319
320 font-family: sans-serif, Arial, Verdana, "Trebuchet MS", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
321 font-size: 16px;
322 line-height: 1.5;
323}
324
325body {
326 height: 100%;
327 color: #2D3A4A;
328}
329
330body * {
331 box-sizing: border-box;
332}
333
334a {
335 color: #38A5EE;
336}
337
338header .centered {
339 display: flex;
340 flex-flow: row nowrap;
341 justify-content: space-between;
342 align-items: center;
343 min-height: 8em;
344}
345
346header h1 a {
347 font-size: 20px;
348 display: flex;
349 align-items: center;
350 color: #2D3A4A;
351 text-decoration: none;
352}
353
354header h1 img {
355 display: block;
356 height: 64px;
357}
358
359header nav ul {
360 margin: 0;
361 padding: 0;
362 list-style-type: none;
363}
364
365header nav ul li {
366 display: inline-block;
367}
368
369header nav ul li + li {
370 margin-left: 1em;
371}
372
373header nav ul li a {
374 font-weight: bold;
375 text-decoration: none;
376 color: #2D3A4A;
377}
378
379header nav ul li a:hover {
380 text-decoration: underline;
381}
382
383main .message {
384 padding: 0 0 var(--ck-sample-base-spacing);
385 background: var(--ck-sample-color-green);
386 color: var(--ck-sample-color-white);
387}
388
389main .message::after {
390 content: "";
391 z-index: -1;
392 display: block;
393 height: 10em;
394 width: 100%;
395 background: var(--ck-sample-color-green);
396 position: absolute;
397 left: 0;
398}
399
400main .message h2 {
401 position: relative;
402 padding-top: 1em;
403 font-size: 2em;
404}
405
406.centered {
407 /* Hide overlapping comments. */
408 overflow: hidden;
409 max-width: var(--ck-sample-container-width);
410 margin: 0 auto;
411 padding: 0 var(--ck-sample-base-spacing);
412}
413
414.row {
415 display: flex;
416 position: relative;
417}
418
419.btn {
420 cursor: pointer;
421 padding: 8px 16px;
422 font-size: 1rem;
423 user-select: none;
424 border-radius: 4px;
425 transition: color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out,opacity .2s ease-in-out;
426 background-color: var(--ck-sample-color-button-blue);
427 border-color: var(--ck-sample-color-button-blue);
428 color: var(--ck-sample-color-white);
429 display: inline-block;
430}
431
432.btn--tiny {
433 padding: 6px 12px;
434 font-size: .8rem;
435}
436
437footer {
438 margin: calc(2*var(--ck-sample-base-spacing)) var(--ck-sample-base-spacing);
439 font-size: .8em;
440 text-align: center;
441 color: rgba(0,0,0,.4);
442}
443
444/* --------- RWD --------------------------------------------------------------------------------------------------- */
445@media screen and ( max-width: 800px ) {
446 :root {
447 --ck-sample-base-spacing: 1em;
448 }
449
450 header h1 {
451 width: 100%;
452 }
453
454 header h1 img {
455 height: 40px;
456 }
457
458 header nav ul {
459 text-align: right;
460 }
461
462 main .message h2 {
463 font-size: 1.5em;
464 }
465}
generated by cgit v1.2.3 (git 2.25.1) at 2025-08-18 09:33:03 +0000