-
Notifications
You must be signed in to change notification settings - Fork 0
/
CKEditor.html
401 lines (391 loc) · 17 KB
/
CKEditor.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CKEditor 5 - Try @ and / for extra features </title>
<style>
.ck.ck-editor__editable_inline:not(.ck-editor__nested-editable) {
min-height: 400px;
max-height: 800px;
}
</style>
<!-- <style>
body {
max-width: 1200px;
padding: 0 20px;
margin: 20px auto;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
overflow-y: scroll;
}
/* Set the minimum height of Classic editor */
.ck.ck-editor__editable_inline:not(.ck-editor__nested-editable) {
min-height: 400px;
}
/* Styles to render an editor with a sidebar for comments & suggestions */
.container {
display: flex;
flex-direction: row;
}
.document-outline-container {
background-color: #f3f7fb;
width: 200px;
}
.sidebar {
width: 320px;
}
#editor-container .ck.ck-editor {
width: 860px;
}
#editor-container .sidebar {
margin-left: 20px;
}
#editor-container .sidebar.narrow {
width: 30px;
}
/* Keep the automatic height of the editor for adding comments */
.ck-annotation-wrapper .ck.ck-editor__editable_inline {
min-height: auto;
}
/* Styles for viewing revision history */
#revision-viewer-container {
display: none;
}
#revision-viewer-container .ck.ck-editor {
width: 860px;
}
#revision-viewer-container .ck.ck-content {
min-height: 400px;
}
#revision-viewer-container .sidebar {
border: 1px #c4c4c4 solid;
margin-left: -1px;
width: 320px;
}
#revision-viewer-container .ck.ck-revision-history-sidebar__header {
height: 39px;
background: #FAFAFA;
}
.hidden {
display: none!important;
}
</style> -->
</head>
<body>
<h1>CKEditor 5 - Try @ and / for extra features</h1>
<!-- Use simpler CSS and HTML structure if you do not want to integrate i.e. the Revision history feature. !-->
<div id="presence-list-container"></div>
<div id="editor-container">
<div class="container">
<div id="outline" class="document-outline-container"></div>
<div id="editor"></div>
<div class="sidebar" id="sidebar"></div>
</div>
</div>
<div id="revision-viewer-container">
<div class="container">
<div id="revision-viewer-editor"></div>
<div class="sidebar" id="revision-viewer-sidebar"></div>
</div>
</div>
<!--
https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/ckbox.html
-->
<script src="https://cdn.ckbox.io/CKBox/1.5.0/ckbox.js"></script>
<!--
The "super-build" of CKEditor 5 served via CDN contains a large set of plugins and multiple editor types.
See https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/quick-start.html#running-a-full-featured-editor-from-cdn
-->
<script src="https://cdn.ckeditor.com/ckeditor5/38.0.1/super-build/ckeditor.js"></script>
<!--
Uncomment to load the Spanish translation
<script src="https://cdn.ckeditor.com/ckeditor5/38.0.1/super-build/translations/es.js"></script>
-->
<script>
// This sample still does not showcase all CKEditor 5 features (!)
// Visit https://ckeditor.com/docs/ckeditor5/latest/features/index.html to browse all the features.
CKEDITOR.ClassicEditor.create( document.querySelector( '#editor' ), {
// https://ckeditor.com/docs/ckeditor5/latest/features/toolbar/toolbar.html#extended-toolbar-configuration-format
toolbar: {
items: [
'ckbox', 'uploadImage', '|',
'exportPDF','exportWord', '|',
'comment', 'trackChanges', 'revisionHistory', '|',
'findAndReplace', 'selectAll', 'formatPainter', '|',
'undo', 'redo',
'-',
'bold', 'italic', 'strikethrough', 'underline', 'removeFormat', '|',
'bulletedList', 'numberedList', 'todoList', '|',
'outdent', 'indent', '|',
'alignment', '|',
'-',
'heading', '|',
'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'highlight', '|',
'link', 'blockQuote', 'insertTable', 'mediaEmbed', 'codeBlock', 'htmlEmbed', 'tableOfContents', 'insertTemplate', '|',
'specialCharacters', 'horizontalLine', 'pageBreak', '|',
// Intentionally skipped buttons to keep the toolbar smaller, feel free to enable them:
// 'code', 'subscript', 'superscript', 'textPartLanguage', '|',
// ** To use source editing remember to disable real-time collaboration plugins **
// 'sourceEditing'
],
shouldNotGroupWhenFull: false
},
// Changing the language of the interface requires loading the language file using the <script> tag.
// language: 'es',
list: {
properties: {
styles: true,
startIndex: true,
reversed: true
}
},
// https://ckeditor.com/docs/ckeditor5/latest/features/headings.html#configuration
heading: {
options: [
{ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
{ model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
{ model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
{ model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
{ model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
{ model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' },
{ model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' }
]
},
// https://ckeditor.com/docs/ckeditor5/latest/features/font.html#configuring-the-font-family-feature
fontFamily: {
options: [
'default',
'Arial, Helvetica, sans-serif',
'Courier New, Courier, monospace',
'Georgia, serif',
'Lucida Sans Unicode, Lucida Grande, sans-serif',
'Tahoma, Geneva, sans-serif',
'Times New Roman, Times, serif',
'Trebuchet MS, Helvetica, sans-serif',
'Verdana, Geneva, sans-serif'
],
supportAllValues: true
},
// https://ckeditor.com/docs/ckeditor5/latest/features/font.html#configuring-the-font-size-feature
fontSize: {
options: [ 10, 12, 14, 'default', 18, 20, 22 ],
supportAllValues: true
},
// Be careful with the setting below. It instructs CKEditor to accept ALL HTML markup.
// https://ckeditor.com/docs/ckeditor5/latest/features/general-html-support.html#enabling-all-html-features
// htmlSupport: {
// allow: [
// {
// name: /.*/,
// attributes: true,
// classes: true,
// styles: true
// }
// ]
// },
// Be careful with enabling previews
// https://ckeditor.com/docs/ckeditor5/latest/features/html-embed.html#content-previews
htmlEmbed: {
showPreviews: true
},
// https://ckeditor.com/docs/ckeditor5/latest/features/mentions.html#configuration
mention: {
feeds: [
{
marker: '@',
feed: [
'@apple', '@bears', '@brownie', '@cake', '@cake', '@candy', '@canes', '@chocolate', '@cookie', '@cotton', '@cream',
'@cupcake', '@danish', '@donut', '@dragée', '@fruitcake', '@gingerbread', '@gummi', '@ice', '@jelly-o',
'@liquorice', '@macaroon', '@marzipan', '@oat', '@pie', '@plum', '@pudding', '@sesame', '@snaps', '@soufflé',
'@sugar', '@sweet', '@topping', '@wafer'
],
minimumCharacters: 1
}
]
},
template: {
definitions: [
{
title: 'The title of the template',
description: 'A longer description of the template',
data: '<p>Data inserted into the content</p>'
},
{
title: 'Annual financial report',
description: 'A report that spells out the company\'s financial condition.',
data: `<figure class="table">
<table style="border:2px solid hsl(0, 0%, 0%);">
<thead>
<tr>
<th style="text-align:center;" rowspan="2">Metric name</th>
<th style="text-align:center;" colspan="4">Year</th>
</tr>
<tr>
<th style="background-color:hsl(90, 75%, 60%);text-align:center;">2019</th>
<th style="background-color:hsl(90, 75%, 60%);text-align:center;">2020</th>
<th style="background-color:hsl(90, 75%, 60%);text-align:center;">2021</th>
<th style="background-color:hsl(90, 75%, 60%);text-align:center;">2022</th>
</tr>
</thead>
<tbody>
<tr>
<th><strong>Revenue</strong></th>
<td>$100,000.00</td>
<td>$120,000.00</td>
<td>$130,000.00</td>
<td>$180,000.00</td>
</tr>
<tr>
<th style="background-color:hsl(0, 0%, 90%);"><strong>Operating expenses</strong></th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th><strong>Interest</strong></th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th style="background-color:hsl(0, 0%, 90%);"><strong>Net profit</strong></th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</figure>`
},
]
},
// https://ckeditor.com/docs/ckeditor5/latest/features/editor-placeholder.html#using-the-editor-configuration
placeholder: 'Welcome to CKEditor 5!',
// Used by real-time collaboration
cloudServices: {
// Be careful - do not use the development token endpoint on production systems!
tokenUrl: 'https://100484.cke-cs.com/token/dev/CnB6NF3jA7vnzhjHw6RKBtUWhcRWZCLFFZ3v?limit=10',
webSocketUrl: 'wss://100484.cke-cs.com/ws'
},
collaboration: {
// Modify the channelId to simulate editing different documents
// https://ckeditor.com/docs/ckeditor5/latest/features/collaboration/real-time-collaboration/real-time-collaboration-integration.html#the-channelid-configuration-property
channelId: 'document-id-5'
},
// https://ckeditor.com/docs/ckeditor5/latest/features/collaboration/annotations/annotations-custom-configuration.html#sidebar-configuration
sidebar: {
container: document.querySelector( '#sidebar' )
},
documentOutline: {
container: document.querySelector( '#outline')
},
// https://ckeditor.com/docs/ckeditor5/latest/features/collaboration/real-time-collaboration/users-in-real-time-collaboration.html#users-presence-list
presenceList: {
container: document.querySelector( '#presence-list-container' )
},
// Add configuration for the comments editor if the Comments plugin is added.
// https://ckeditor.com/docs/ckeditor5/latest/features/collaboration/annotations/annotations-custom-configuration.html#comment-editor-configuration
comments: {
editorConfig: {
extraPlugins: CKEDITOR.ClassicEditor.builtinPlugins.filter( plugin => {
// Use e.g. Ctrl+B in the comments editor to bold text.
return [ 'Bold', 'Italic', 'Underline', 'List', 'Autoformat', 'Mention' ].includes( plugin.pluginName );
} ),
// Combine mentions + Webhooks to notify users about new comments
// https://ckeditor.com/docs/cs/latest/guides/webhooks/events.html
mention: {
feeds: [
{
marker: '@',
feed: [
'@Baby Doe', '@Joe Doe', '@Jane Doe', '@Jane Roe', '@Richard Roe'
],
minimumCharacters: 1
}
]
},
}
},
// Do not include revision history configuration if you do not want to integrate it.
// Remember to remove the 'revisionHistory' button from the toolbar in such a case.
revisionHistory: {
editorContainer: document.querySelector( '#editor-container' ),
viewerContainer: document.querySelector( '#revision-viewer-container' ),
viewerEditorElement: document.querySelector( '#revision-viewer-editor' ),
viewerSidebarContainer: document.querySelector( '#revision-viewer-sidebar' ),
},
// https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/ckbox.html
ckbox: {
// Be careful - do not use the development token endpoint on production systems!
tokenUrl: 'https://100484.cke-cs.com/token/dev/CnB6NF3jA7vnzhjHw6RKBtUWhcRWZCLFFZ3v?limit=10'
},
// License key is required only by the Pagination plugin and non-realtime Comments/Track changes.
licenseKey: 'DNW0ySpUxofNEJyH7g2PcUmHpqTHf+MZCko/4CXKE921W4fvwNufZzQ9vaF9',
removePlugins: [
// Before enabling Pagination plugin, make sure to provide proper configuration and add relevant buttons to the toolbar
// https://ckeditor.com/docs/ckeditor5/latest/features/pagination/pagination.html
'Pagination',
// Intentionally disabled, file uploads are handled by CKBox
'Base64UploadAdapter',
// Intentionally disabled, file uploads are handled by CKBox
'CKFinder',
// Intentionally disabled, file uploads are handled by CKBox
'EasyImage',
// Requires additional license key
'WProofreader',
// Incompatible with real-time collaboration
'SourceEditing',
// Careful, with the Mathtype plugin CKEditor will not load when loading this sample
// from a local file system (file://) - load this site via HTTP server if you enable MathType
'MathType'
// If you would like to adjust enabled collaboration features:
// 'RealTimeCollaborativeComments',
// 'RealTimeCollaborativeTrackChanges',
// 'RealTimeCollaborativeRevisionHistory',
// 'PresenceList',
// 'Comments',
// 'TrackChanges',
// 'TrackChangesData',
// 'RevisionHistory',
]
} )
.then( editor => {
window.editor = editor;
// Example implementation to switch between different types of annotations according to the window size.
// https://ckeditor.com/docs/ckeditor5/latest/features/collaboration/annotations/annotations-display-mode.html
const annotationsUIs = editor.plugins.get( 'AnnotationsUIs' );
const sidebarElement = document.querySelector( '.sidebar' );
let currentWidth;
function refreshDisplayMode() {
// Check the window width to avoid the UI switching when the mobile keyboard shows up.
if ( window.innerWidth === currentWidth ) {
return;
}
currentWidth = window.innerWidth;
if ( currentWidth < 1000 ) {
sidebarElement.classList.remove( 'narrow' );
sidebarElement.classList.add( 'hidden' );
annotationsUIs.switchTo( 'inline' );
}
else if ( currentWidth < 1300 ) {
sidebarElement.classList.remove( 'hidden' );
sidebarElement.classList.add( 'narrow' );
annotationsUIs.switchTo( 'narrowSidebar' );
}
else {
sidebarElement.classList.remove( 'hidden', 'narrow' );
annotationsUIs.switchTo( 'wideSidebar' );
}
}
editor.ui.view.listenTo( window, 'resize', refreshDisplayMode );
refreshDisplayMode();
return editor;
} )
.catch( error => {
console.error( 'There was a problem initializing the editor.', error );
} );
</script>
</body>
</html>