-
Notifications
You must be signed in to change notification settings - Fork 141
/
pastefromword.html
421 lines (359 loc) · 32.5 KB
/
pastefromword.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
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
<!DOCTYPE html>
<!--
Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license.
-->
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Advanced Paste from Word feature in CKEditor.">
<meta name="keywords" content="ckeditor, editor, wysiwyg, wysiwym, installation, paste from Word, pasting, copying, plugins">
<meta name="sdk-samples" content="Paste from Word">
<meta name="sdk-category" content="sdk-inserting-content">
<meta name="sdk-order" content="10">
<title>Paste from Word</title>
<link href="https://fonts.googleapis.com/css?family=Maven+Pro:700,500,400" rel="stylesheet">
<link href="../template/theme/css/sdk.css" rel="stylesheet">
<script src="../../ckeditor4/ckeditor.js"></script>
<script src="assets/picoModal-2.0.1.min.js"></script>
<script src="assets/sample.js"></script>
<script src="assets/contentloaded.js"></script>
<script src="assets/simplesample.js"></script>
<script src="assets/beautify-html.js"></script>
<!--[if lt IE 9]>
<script src="assets/html5shiv.min.js"></script>
<![endif]-->
<link rel="icon" href="../template/theme/img/favicon.ico">
<style type="text/css" data-sample="1">
/* Minimal styling to center the editor in this sample */
.container {
padding: 30px;
display: flex;
align-items: center;
text-align: center;
}
.inner-container {
margin: 0 auto;
}
</style>
</head>
<body>
<header class="sdk-header">
</header>
<section class="sdk-container">
<nav class="sdk-sidebar">
</nav>
<section class="sdk-contents" data-cke-preset="full-all">
<h1>Pasting content from Microsoft Word <a class="documentation" href="https://ckeditor.com/docs/ckeditor4/latest/features/pastefromword.html">Documentation</a></h1>
<h2>Overview</h2>
<p>
The Paste from Word feature is provided through the <a href="https://ckeditor.com/cke4/addon/pastefromword">Paste from Word</a> plugin. It was heavily reworked in CKEditor 4.6. It is available in the Standard and Full distributions by default.
</p>
<p>
This feature allows you to paste content from Microsoft Word and maintain original structure and formatting. After creating a document in Word, you can simply copy it and paste it into CKEditor 4 and retain images, font styles, heading levels, nested lists, complex tables and other advanced features.
</p>
<p>
If the plugin is enabled, it automatically detects Word content and transforms its structure and formatting to clean, semantic HTML. It also adds the <span class="button_icon" data-icon="pastefromword" title="Paste from Word"> </span> toolbar button which makes it possible to paste clipboard data this way only on demand.
</p>
<h2 id="unrestricted-pasting">Pasting content without filtering</h2>
<p>
To test how Paste from Word works, download the <a href="assets/pfw/CKEditor4.PFW.Sample.Recognition_of_Achievement.docx">sample Word document</a>, open it in Microsoft Word, copy the content, and paste it into CKEditor 4. Check the clean HTML source code generated by CKEditor 4 using the Source button.
</p>
<p class="tip">
Pasted content may be filtered by additional <a href="https://ckeditor.com/docs/ckeditor4/latest/guide/dev_acf.html">Advanced Content Filter rules</a> - see <a href="https://ckeditor.com/docs/ckeditor4/latest/examples/pastefromword.html#pasting-with-filtering">the second sample</a> below. The content appearance in CKEditor 4 also depends on styling used in <code><a href="https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-contentsCss">contents.css</a></code> files.
</p>
<p class="tip">
You may also test Pasting from Word with even more complex styling by using our <a href="assets/pfw/CKEditor4.PFW.Sample.Mixed_styles.docx">Word document with a more complicated structure and styling</a> sample.
</p>
<div class="container">
<div class="inner-container">
<textarea cols="80" id="editor1" name="editor1" rows="10" data-sample="1" data-sample-short>
<h1 style="text-align:center"><span style="font-size:22pt"><span style="font-family:Arial,sans-serif"><span style="font-family:Georgia,serif"><span style="color:#006699">Recognition of Achievement</span></span></span></span></h1>
<p style="text-align:justify"><span style="font-size:11pt"><span style="font-family:Arial,sans-serif"><span style="color:#333333"><span style="font-family:Georgia,serif">This letter acknowledges the invaluable input <strong>you</strong>, as a member of our Innovation Team, have provided in the “Implement Rich Text Editor” project. </span></span></span></span></p>
<p style="text-align:justify"><span style="font-size:11pt"><span style="font-family:Arial,sans-serif"><span style="color:#333333"><span style="font-family:Georgia,serif">The Management would like to hereby thank you for this great accomplishment that was delivered in a timely fashion, up to the highest company standards, and with great results:</span></span></span></span></p>
<table cellspacing="0" class="MsoTableGrid" style="border-collapse:collapse; border:none; width:597px">
<tbody>
<tr>
<td style="background-color:#cccccc; border-bottom:1px solid black; border-left:1px solid black; border-right:1px solid black; border-top:1px solid black; width:59%px">
<p style="text-align:center"><span style="font-size:11pt"><span style="font-family:Arial,sans-serif"><span style="color:#333333"><strong><span style="font-family:Georgia,serif">Project Phase</span></strong></span></span></span></p>
</td>
<td style="background-color:#cccccc; border-bottom:1px solid black; border-left:none; border-right:1px solid black; border-top:1px solid black; width:24%px">
<p style="text-align:center"><span style="font-size:11pt"><span style="font-family:Arial,sans-serif"><span style="color:#333333"><strong><span style="font-family:Georgia,serif">Deadline</span></strong></span></span></span></p>
</td>
<td style="background-color:#cccccc; border-bottom:1px solid black; border-left:none; border-right:1px solid black; border-top:1px solid black; width:17%px">
<p style="text-align:center"><span style="font-size:11pt"><span style="font-family:Arial,sans-serif"><span style="color:#333333"><strong><span style="font-family:Georgia,serif">Status</span></strong></span></span></span></p>
</td>
</tr>
<tr>
<td style="border-bottom:1px solid black; border-left:1px solid black; border-right:1px solid black; border-top:none; width:59%px">
<p><span style="font-size:11pt"><span style="font-family:Arial,sans-serif"><span style="color:#333333"><span style="font-family:Georgia,serif">Phase 1: Market research</span></span></span></span></p>
</td>
<td style="border-bottom:1px solid black; border-left:none; border-right:1px solid black; border-top:none; width:24%px">
<p style="text-align:center"><span style="font-size:11pt"><span style="font-family:Arial,sans-serif"><span style="color:#333333"><span style="font-family:Georgia,serif">2021-04-15</span></span></span></span></p>
</td>
<td style="border-bottom:1px solid black; border-left:none; border-right:1px solid black; border-top:none; width:17%px">
<p style="text-align:center"><span style="font-size:11pt"><span style="font-family:Arial,sans-serif"><span style="color:#333333"><span style="font-family:'Segoe UI Symbol',sans-serif"><span style="color:#19b159">✓</span></span></span></span></span></p>
</td>
</tr>
<tr>
<td style="background-color:#eeeeee; border-bottom:1px solid black; border-left:1px solid black; border-right:1px solid black; border-top:none; width:59%px">
<p><span style="font-size:11pt"><span style="font-family:Arial,sans-serif"><span style="color:#333333"><span style="font-family:Georgia,serif">Phase 2: Editor implementation</span></span></span></span></p>
</td>
<td style="background-color:#eeeeee; border-bottom:1px solid black; border-left:none; border-right:1px solid black; border-top:none; width:24%px">
<p style="text-align:center"><span style="font-size:11pt"><span style="font-family:Arial,sans-serif"><span style="color:#333333"><span style="font-family:Georgia,serif">2021-04-20</span></span></span></span></p>
</td>
<td style="background-color:#eeeeee; border-bottom:1px solid black; border-left:none; border-right:1px solid black; border-top:none; width:17%px">
<p style="text-align:center"><span style="font-size:11pt"><span style="font-family:Arial,sans-serif"><span style="color:#333333"><span style="font-family:'Segoe UI Symbol',sans-serif"><span style="color:#19b159">✓</span></span></span></span></span></p>
</td>
</tr>
<tr>
<td style="border-bottom:1px solid black; border-left:1px solid black; border-right:1px solid black; border-top:none; width:59%px">
<p><span style="font-size:11pt"><span style="font-family:Arial,sans-serif"><span style="color:#333333"><span style="font-family:Georgia,serif">Phase 3: Rollout to Production</span></span></span></span></p>
</td>
<td style="border-bottom:1px solid black; border-left:none; border-right:1px solid black; border-top:none; width:24%px">
<p style="text-align:center"><span style="font-size:11pt"><span style="font-family:Arial,sans-serif"><span style="color:#333333"><span style="font-family:Georgia,serif">2021-04-22</span></span></span></span></p>
</td>
<td style="border-bottom:1px solid black; border-left:none; border-right:1px solid black; border-top:none; width:17%px">
<p style="text-align:center"><span style="font-size:11pt"><span style="font-family:Arial,sans-serif"><span style="color:#333333"><span style="font-family:'Segoe UI Symbol',sans-serif"><span style="color:#19b159">✓</span></span></span></span></span></p>
</td>
</tr>
</tbody>
</table>
<p style="text-align:justify"> </p>
<p style="text-align:justify"><span style="font-size:11pt"><span style="font-family:Arial,sans-serif"><span style="color:#333333"><span style="font-family:Georgia,serif">The project that you participated in is of utmost importance to the future success of our platform. We are very proud to share that the CKEditor implementation was a huge success and brought congratulations from both the key Stakeholders and the Customers:</span></span></span></span></p>
<p style="text-align:center"><span style="font-size:11pt"><span style="font-family:Arial,sans-serif"><span style="color:#333333"><em><span style="font-family:Georgia,serif">This new editor has totally changed our content creation experience!</span></em></span></span></span></p>
<p style="text-align:center"><span style="font-size:11pt"><span style="font-family:Arial,sans-serif"><span style="color:#333333"><em><span style="font-family:Georgia,serif">— John F. Smith, CEO, The New Web</span></em></span></span></span></p>
<p style="text-align:justify"><span style="font-size:11pt"><span style="font-family:Arial,sans-serif"><span style="color:#333333"><span style="font-family:Georgia,serif">This letter recognizes that much of our success is directly attributable to your efforts. You deserve to be proud of your achievement. May your future efforts be equally successful and rewarding.</span></span></span></span></p>
<p style="text-align:justify"><span style="font-size:11pt"><span style="font-family:Arial,sans-serif"><span style="color:#333333"><span style="font-family:Georgia,serif">I am sure we will be seeing and hearing a great deal more about your accomplishments in the future. Keep up the good work!</span></span></span></span></p>
<p> </p>
<p><span style="font-size:11pt"><span style="font-family:Arial,sans-serif"><span style="color:#333333"><span style="font-family:Georgia,serif">Best regards,</span></span></span></span></p>
<p><span style="font-size:11pt"><span style="font-family:Arial,sans-serif"><span style="color:#333333"><em><span style="font-family:Georgia,serif">The Management</span></em></span></span></span></p>
</textarea>
</div>
</div>
<h2 id="pasting-with-filtering">Filtering pasted content with ACF</h2>
<p>
The second editor shows the content filtering possibilities in CKEditor 4 - it enforces the use of only a subset of features, e.g. it filters out tables and images. This can be helpful, for example, while creating official documents.
<strong>Notice how the table and images will be stripped off during pasting if the original Word document contains any</strong>.
</p>
<p>
For the exemplary content to paste you can download the <a href="assets/pfw/CKEditor4.PFW.Sample.Recognition_of_Achievement.docx">sample Word document</a>.
</p>
<div class="container">
<div class="inner-container">
<textarea cols="80" id="editor2" name="editor2" rows="10" data-sample="1" data-sample-short>
<h1 style="text-align:center"><span style="font-size:22pt"><span style="font-family:Arial,sans-serif"><span style="font-family:Georgia,serif"><span style="color:#006699">Recognition of Achievement</span></span></span></span></h1>
<p style="text-align:justify"><span style="font-size:11pt"><span style="font-family:Arial,sans-serif"><span style="color:#333333"><span style="font-family:Georgia,serif">This letter acknowledges the invaluable input <strong>you</strong>, as a member of our Innovation Team, have provided in the “Implement Rich Text Editor” project. </span></span></span></span></p>
<p style="text-align:justify"><span style="font-size:11pt"><span style="font-family:Arial,sans-serif"><span style="color:#333333"><span style="font-family:Georgia,serif">The Management would like to hereby thank you for this great accomplishment that was delivered in a timely fashion, up to the highest company standards, and with great results:</span></span></span></span></p>
<table cellspacing="0" class="MsoTableGrid" style="border-collapse:collapse; border:none; width:597px">
<tbody>
<tr>
<td style="background-color:#cccccc; border-bottom:1px solid black; border-left:1px solid black; border-right:1px solid black; border-top:1px solid black; width:59%px">
<p style="text-align:center"><span style="font-size:11pt"><span style="font-family:Arial,sans-serif"><span style="color:#333333"><strong><span style="font-family:Georgia,serif">Project Phase</span></strong></span></span></span></p>
</td>
<td style="background-color:#cccccc; border-bottom:1px solid black; border-left:none; border-right:1px solid black; border-top:1px solid black; width:24%px">
<p style="text-align:center"><span style="font-size:11pt"><span style="font-family:Arial,sans-serif"><span style="color:#333333"><strong><span style="font-family:Georgia,serif">Deadline</span></strong></span></span></span></p>
</td>
<td style="background-color:#cccccc; border-bottom:1px solid black; border-left:none; border-right:1px solid black; border-top:1px solid black; width:17%px">
<p style="text-align:center"><span style="font-size:11pt"><span style="font-family:Arial,sans-serif"><span style="color:#333333"><strong><span style="font-family:Georgia,serif">Status</span></strong></span></span></span></p>
</td>
</tr>
<tr>
<td style="border-bottom:1px solid black; border-left:1px solid black; border-right:1px solid black; border-top:none; width:59%px">
<p><span style="font-size:11pt"><span style="font-family:Arial,sans-serif"><span style="color:#333333"><span style="font-family:Georgia,serif">Phase 1: Market research</span></span></span></span></p>
</td>
<td style="border-bottom:1px solid black; border-left:none; border-right:1px solid black; border-top:none; width:24%px">
<p style="text-align:center"><span style="font-size:11pt"><span style="font-family:Arial,sans-serif"><span style="color:#333333"><span style="font-family:Georgia,serif">2021-04-15</span></span></span></span></p>
</td>
<td style="border-bottom:1px solid black; border-left:none; border-right:1px solid black; border-top:none; width:17%px">
<p style="text-align:center"><span style="font-size:11pt"><span style="font-family:Arial,sans-serif"><span style="color:#333333"><span style="font-family:'Segoe UI Symbol',sans-serif"><span style="color:#19b159">✓</span></span></span></span></span></p>
</td>
</tr>
<tr>
<td style="background-color:#eeeeee; border-bottom:1px solid black; border-left:1px solid black; border-right:1px solid black; border-top:none; width:59%px">
<p><span style="font-size:11pt"><span style="font-family:Arial,sans-serif"><span style="color:#333333"><span style="font-family:Georgia,serif">Phase 2: Editor implementation</span></span></span></span></p>
</td>
<td style="background-color:#eeeeee; border-bottom:1px solid black; border-left:none; border-right:1px solid black; border-top:none; width:24%px">
<p style="text-align:center"><span style="font-size:11pt"><span style="font-family:Arial,sans-serif"><span style="color:#333333"><span style="font-family:Georgia,serif">2021-04-20</span></span></span></span></p>
</td>
<td style="background-color:#eeeeee; border-bottom:1px solid black; border-left:none; border-right:1px solid black; border-top:none; width:17%px">
<p style="text-align:center"><span style="font-size:11pt"><span style="font-family:Arial,sans-serif"><span style="color:#333333"><span style="font-family:'Segoe UI Symbol',sans-serif"><span style="color:#19b159">✓</span></span></span></span></span></p>
</td>
</tr>
<tr>
<td style="border-bottom:1px solid black; border-left:1px solid black; border-right:1px solid black; border-top:none; width:59%px">
<p><span style="font-size:11pt"><span style="font-family:Arial,sans-serif"><span style="color:#333333"><span style="font-family:Georgia,serif">Phase 3: Rollout to Production</span></span></span></span></p>
</td>
<td style="border-bottom:1px solid black; border-left:none; border-right:1px solid black; border-top:none; width:24%px">
<p style="text-align:center"><span style="font-size:11pt"><span style="font-family:Arial,sans-serif"><span style="color:#333333"><span style="font-family:Georgia,serif">2021-04-22</span></span></span></span></p>
</td>
<td style="border-bottom:1px solid black; border-left:none; border-right:1px solid black; border-top:none; width:17%px">
<p style="text-align:center"><span style="font-size:11pt"><span style="font-family:Arial,sans-serif"><span style="color:#333333"><span style="font-family:'Segoe UI Symbol',sans-serif"><span style="color:#19b159">✓</span></span></span></span></span></p>
</td>
</tr>
</tbody>
</table>
<p style="text-align:justify"> </p>
<p style="text-align:justify"><span style="font-size:11pt"><span style="font-family:Arial,sans-serif"><span style="color:#333333"><span style="font-family:Georgia,serif">The project that you participated in is of utmost importance to the future success of our platform. We are very proud to share that the CKEditor implementation was a huge success and brought congratulations from both the key Stakeholders and the Customers:</span></span></span></span></p>
<p style="text-align:center"><span style="font-size:11pt"><span style="font-family:Arial,sans-serif"><span style="color:#333333"><em><span style="font-family:Georgia,serif">This new editor has totally changed our content creation experience!</span></em></span></span></span></p>
<p style="text-align:center"><span style="font-size:11pt"><span style="font-family:Arial,sans-serif"><span style="color:#333333"><em><span style="font-family:Georgia,serif">— John F. Smith, CEO, The New Web</span></em></span></span></span></p>
<p style="text-align:justify"><span style="font-size:11pt"><span style="font-family:Arial,sans-serif"><span style="color:#333333"><span style="font-family:Georgia,serif">This letter recognizes that much of our success is directly attributable to your efforts. You deserve to be proud of your achievement. May your future efforts be equally successful and rewarding.</span></span></span></span></p>
<p style="text-align:justify"><span style="font-size:11pt"><span style="font-family:Arial,sans-serif"><span style="color:#333333"><span style="font-family:Georgia,serif">I am sure we will be seeing and hearing a great deal more about your accomplishments in the future. Keep up the good work!</span></span></span></span></p>
<p> </p>
<p><span style="font-size:11pt"><span style="font-family:Arial,sans-serif"><span style="color:#333333"><span style="font-family:Georgia,serif">Best regards,</span></span></span></span></p>
<p><span style="font-size:11pt"><span style="font-family:Arial,sans-serif"><span style="color:#333333"><em><span style="font-family:Georgia,serif">The Management</span></em></span></span></span></p>
</textarea>
</div>
</div>
<h2>Related Features</h2>
<ul>
<li><a href="./pastefromgoogledocs.html">Inserting Content – Pasting Content from Google Docs</a></li>
<li><a href="./pastefromexcel.html">Inserting Content – Pasting Content from Microsoft Excel</a></li>
<li><a href="./pastefromlibreoffice.html">Inserting Content – Pasting Content from LibreOffice Writer</a></li>
<li><a href="./styles.html#widget-styles">Styling and Formatting – Applying Styles to Editor Content</a></li>
<li><a href="./colorbutton.html">Styling and Formatting – Setting Text and Background Color</a></li>
<li><a href="./acf.html">Content Filtering – Advanced Content Filter – Automatic Mode</a></li>
</ul>
<h2>Sample Word Documents</h2>
<ul>
<li><a href="assets/pfw/CKEditor4.PFW.Sample.Recognition_of_Achievement.docx">"Recognition of Achievement" document</a></li>
<li><a href="assets/pfw/CKEditor4.PFW.Sample.Mixed_styles.docx">A document with complex structure and formatting</a></li>
</ul>
<script src="assets/activate.js"></script>
<script data-sample="1">
CKEDITOR.replace( 'editor1', {
// Make the editing area bigger than default.
height: 1000,
width: 760,
// Allow pasting any content.
allowedContent: true,
// Fit toolbar buttons inside 3 rows.
toolbarGroups: [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
{ name: 'forms', groups: [ 'forms' ] },
'/',
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
{ name: 'links', groups: [ 'links' ] },
{ name: 'insert', groups: [ 'insert' ] },
'/',
{ name: 'styles', groups: [ 'styles' ] },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'colors', groups: [ 'colors' ] },
{ name: 'tools', groups: [ 'tools' ] },
{ name: 'others', groups: [ 'others' ] },
{ name: 'about', groups: [ 'about' ] }
],
// Remove buttons irrelevant for pasting from external sources.
removeButtons: 'ExportPdf,Form,Checkbox,Radio,TextField,Select,Textarea,Button,ImageButton,HiddenField,NewPage,CreateDiv,Flash,Iframe,About,ShowBlocks,Maximize',
// An array of stylesheets to style the WYSIWYG area.
// Note: it is recommended to keep your own styles in a separate file in order to make future updates painless.
contentsCss: [
CKEDITOR.basePath + 'contents.css',
'assets/css/pastefromword.css'
],
// This is optional, but will let us define multiple different styles for multiple editors using the same CSS file.
bodyClass: 'document-editor'
} );
CKEDITOR.replace( 'editor2', {
// Make the editing area bigger than default.
height: 1000,
width: 760,
// Define the toolbar: https://ckeditor.com/docs/ckeditor4/latest/features/toolbar.html
// The full preset from CDN which we used as a base provides more features than we need.
// Also by default it comes with a 3-line toolbar. Here we put all buttons in two rows.
toolbar: [
{ name: 'document', items: [ 'Source', 'Print', 'PageBreak' ] },
{ name: 'clipboard', items: [ 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote' ] },
{ name: 'insert', items: [ 'Image', 'Table' ] },
{ name: 'align', items: [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
{ name: 'links', items: [ 'Link', 'Unlink' ] },
{ name: 'editing', items: [ 'Scayt' ] },
'/',
{ name: 'styles', items: [ 'Format', 'Font', 'FontSize' ] },
{ name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript' ] },
{ name: 'colors', items: [ 'CopyFormatting', 'RemoveFormat', '-', 'TextColor', 'BGColor' ] }
],
// Since we define all configuration options here, let's instruct CKEditor 4 to not load config.js which it does by default.
// One HTTP request less will result in a faster startup time.
// For more information check https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-customConfig
customConfig: '',
// Upload images to a CKFinder connector (note that the response type is set to JSON).
uploadUrl: '/apps/ckfinder/{%CKFINDER_VERSION%}/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json',
// Configure your file manager integration. This example uses CKFinder 3 for PHP.
filebrowserBrowseUrl: '/apps/ckfinder/{%CKFINDER_VERSION%}/ckfinder.html',
filebrowserImageBrowseUrl: '/apps/ckfinder/{%CKFINDER_VERSION%}/ckfinder.html?type=Images',
filebrowserUploadUrl: '/apps/ckfinder/{%CKFINDER_VERSION%}/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl: '/apps/ckfinder/{%CKFINDER_VERSION%}/core/connector/php/connector.php?command=QuickUpload&type=Images',
// For more information check:
// - About Advanced Content Filter: https://ckeditor.com/docs/ckeditor4/latest/guide/dev_advanced_content_filter.html
// - About Disallowed Content: https://ckeditor.com/docs/ckeditor4/latest/guide/dev_disallowed_content.html
// - About Allowed Content: https://ckeditor.com/docs/ckeditor4/latest/guide/dev_allowed_content_rules.html
disallowedContent: 'img table',
/*********************** File management support ***********************/
// In order to turn on support for file uploads, CKEditor 4 has to be configured to use some server side
// solution with file upload/management capabilities, like for example CKFinder.
// For more information see https://ckeditor.com/docs/ckeditor4/latest/guide/dev_ckfinder_integration.html
// Uncomment and correct these lines after you setup your local CKFinder instance.
// filebrowserBrowseUrl: 'http://example.com/ckfinder/ckfinder.html',
// filebrowserUploadUrl: 'http://example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
/*********************** File management support ***********************/
// An array of stylesheets to style the WYSIWYG area.
// Note: it is recommended to keep your own styles in a separate file in order to make future updates painless.
contentsCss: [
CKEDITOR.basePath + 'contents.css',
'assets/css/pastefromword.css'
],
// This is optional, but will let us define multiple different styles for multiple editors using the same CSS file.
bodyClass: 'document-editor',
// Reduce the list of block elements listed in the Format dropdown to the most commonly used.
format_tags: 'p;h1;h2;h3;pre',
// Simplify the Image and Link dialog windows. The "Advanced" tab is not needed in most cases.
removeDialogTabs: 'image:advanced;link:advanced',
// Define the list of styles which should be available in the Styles dropdown list.
// If the "class" attribute is used to style an element, make sure to define the style for the class in "mystyles.css"
// (and on your website so that it rendered in the same way).
// Note: by default CKEditor looks for styles.js file. Defining stylesSet inline (as below) stops CKEditor 4 from loading
// that file, which means one HTTP request less (and a faster startup).
// For more information see https://ckeditor.com/docs/ckeditor4/latest/features/styles.html
stylesSet: [
/* Inline Styles */
{ name: 'Marker', element: 'span', attributes: { 'class': 'marker' } },
{ name: 'Cited Work', element: 'cite' },
{ name: 'Inline Quotation', element: 'q' },
/* Object Styles */
{
name: 'Special Container',
element: 'div',
styles: {
padding: '5px 10px',
background: '#eee',
border: '1px solid #ccc'
}
},
{
name: 'Compact table',
element: 'table',
attributes: {
cellpadding: '5',
cellspacing: '0',
border: '1',
bordercolor: '#ccc'
},
styles: {
'border-collapse': 'collapse'
}
},
{ name: 'Borderless Table', element: 'table', styles: { 'border-style': 'hidden', 'background-color': '#E6E6FA' } },
{ name: 'Square Bulleted List', element: 'ul', styles: { 'list-style-type': 'square' } }
]
} );
</script>
</section>
</section>
<footer class="sdk-footer">
</footer>
</body>
</html>