Aller au contenu

Modifications pour le document EditSheet

Modifié par Florent Charton le 2026/03/13 11:04
Depuis la version 2.1
modifié par Florent Charton
sur 2024/08/08 18:44
Commentaire de modification : Install extension [org.xwiki.platform:xwiki-platform-ckeditor-ui/15.10.11]
À la version 4.1
modifié par Florent Charton
sur 2025/08/19 15:16
Commentaire de modification : Install extension [org.xwiki.platform:xwiki-platform-ckeditor-ui/17.4.3]

Résumé

Détails

Propriétés de la Page
Contenu
... ... @@ -1,38 +1,0 @@
1 -{{include reference="CKEditor.VelocityMacros"/}}
2 -
3 -{{velocity}}
4 -#if ($doc.fullName == 'CKEditor.EditSheet')
5 - This is a sheet for editing the document content using [[CKEditor>>http://ckeditor.com/]].
6 -#else
7 - {{html clean="false"}}
8 - ## Include the auto-save styles.
9 - #set ($discard = $xwiki.ssfx.use('js/xwiki/editors/autosave.css', true))
10 - #if ("$!request.section" != '')
11 - <div class="hidden">
12 - <input type="hidden" name="section" value="$!escapetool.xml($request.section)"/>
13 - </div>
14 - #end
15 - <div class="row">
16 - <div class="cke-editMeta col-xs-12 col-md-7">
17 - ## Add support for editing the page title (which is not available by default in Inline Form edit mode).
18 - #set ($editor = 'wiki')
19 - #template('editmeta.vm')
20 - #set ($editor = 'inline')
21 - </div>
22 - </div>
23 - ## The xwikieditcontent id is needed for the auto-save feature.
24 - <div id="xwikieditcontent" data-autosave="true">
25 - #set ($parameters = {
26 - 'content': $tdoc.content,
27 - 'attributes': {
28 - 'id': 'content',
29 - 'name': 'content',
30 - 'rows': 25,
31 - 'cols': 80
32 - }
33 - })
34 - #ckeditor($parameters)
35 - </div>
36 - {{/html}}
37 -#end
38 -{{/velocity}}
XWiki.JavaScriptExtension[0]
Code
... ... @@ -54,9 +54,11 @@
54 54   }
55 55  
56 56   var uploadDisabled = element.hasAttribute('data-upload-disabled');
57 + var startupFocus = element.hasAttribute('data-startup-focus');
57 57  
58 58   var config = {
59 59   filebrowserUploadUrl: uploadDisabled ? '' : getUploadURL(sourceDocument, 'filebrowser'),
61 + startupFocus,
60 60   height: $(element).height(),
61 61   // Used to resolve and serialize relative references. Also used to make HTTP requests with the right context.
62 62   sourceDocument: sourceDocument,
XWiki.JavaScriptExtension[2]
Code
... ... @@ -10,7 +10,9 @@
10 10   container.find('.ckeditor-textarea').each(function() {
11 11   // Wrap in try/catch so that a failure to load one editor doesn't affect the other editors.
12 12   try {
13 - createEditor(ckeditor, this);
13 + createEditor(ckeditor, this).then(() => {
14 + this.classList.remove('loading');
15 + });
14 14   } catch(e) {
15 15   console.log(e);
16 16   }
XWiki.StyleSheetExtension[0]
Code
... ... @@ -12,6 +12,13 @@
12 12   resize: none;
13 13  }
14 14  
15 +/* Hide the form action bar while the editor is loading in order to avoid UI flickering (because the editor may enhance
16 + or replace the form action bar). */
17 +main > div:has(.ckeditor-textarea.loading) ~ .bottom-editor,
18 +#xwikicontent.loading ~ form#inplace-editing {
19 + visibility: hidden;
20 +}
21 +
15 15  /* Show the modal above the CKEditor dialogs */
16 16  body > .modal-backdrop {
17 17   z-index: 10040;
... ... @@ -204,8 +204,6 @@
204 204  a.cke_button.cke_button__xwiki-macro-edit > span.cke_button_icon.cke_button__xwiki-macro-edit_icon,
205 205  a.cke_button.cke_button__xwiki-link-open > span.cke_button_icon.cke_button__xwiki-link-open_icon,
206 206  a.cke_button.cke_button__insert > span.cke_button_icon.cke_button__insert_icon {
207 - /* This is needed for XWiki versions older than 7.1M1 where we overwrite the icons path (see above). */
208 - background-image: none !important;
209 209   font-family: 'Glyphicons Halflings';
210 210   position: relative;
211 211   top: 1px;
... ... @@ -312,7 +312,7 @@
312 312   max-width: 64px;
313 313   vertical-align: text-top;
314 314  }
315 -/* The image still takes some space in IE11 even if there's no source specified. Let's make sure it's hidden.
320 +/* The image still takes some space in all browsers even if there's no source specified. Let's make sure it's hidden.
316 316   See CKEDITOR-389: Missing space in the suggestions that appear while using the autocomplete function on IE 11 */
317 317  .ckeditor-autocomplete-item-preview-wrapper img[src=""],
318 318  .ckeditor-autocomplete-item-icon-wrapper img[src=""] {
... ... @@ -388,6 +388,77 @@
388 388  }
389 389  
390 390  /**
396 + * Custom styles to match XWiki's Look & Feel
397 + */
398 +.cke_chrome,
399 +.cke_chrome > .cke_inner {
400 + border-radius: @border-radius-base;
401 +}
402 +
403 +.cke_chrome > .cke_inner > .cke_top {
404 + border-top-right-radius: @border-radius-base;
405 + border-top-left-radius: @border-radius-base;
406 +}
407 +
408 +.cke_chrome > .cke_inner > .cke_bottom {
409 + border-bottom-right-radius: @border-radius-base;
410 + border-bottom-left-radius: @border-radius-base;
411 +}
412 +
413 +/* The standalone WYSIWYG edit mode shows the form action toolbar right below the CKEditor instance used to edit the
414 + document content. We make the bottom border rounded on the form action toolbar instead. */
415 +#xwikieditcontent > .cke_chrome,
416 +#xwikieditcontent > .cke_chrome > .cke_inner,
417 +#xwikieditcontent > .cke_chrome > .cke_inner > .cke_bottom {
418 + border-bottom-right-radius: 0;
419 + border-bottom-left-radius: 0;
420 +}
421 +
422 +a.cke_button,
423 +a.cke_combo_button {
424 + border-radius: @border-radius-small;
425 +}
426 +
427 +.cke_panel,
428 +.cke_dialog_body,
429 +.cke_dialog a.cke_dialog_ui_button,
430 +.cke_dialog input.cke_dialog_ui_input_text,
431 +.cke_dialog select.cke_dialog_ui_input_select,
432 +.cke_dialog fieldset.cke_dialog_ui_fieldset,
433 +.cke_notification {
434 + border-radius: @border-radius-base;
435 +}
436 +
437 +.cke_panel.cke_menu_panel,
438 +.cke_panel.cke_combopanel {
439 + margin: 2px 0;
440 +}
441 +
442 +.cke_dialog_title,
443 +.cke_dialog a.cke_dialog_tab {
444 + border-top-right-radius: @border-radius-base;
445 + border-top-left-radius: @border-radius-base;
446 +}
447 +
448 +.cke_dialog_contents,
449 +.cke_dialog_footer {
450 + border-bottom-right-radius: @border-radius-base;
451 + border-bottom-left-radius: @border-radius-base;
452 +}
453 +
454 +/**
455 + * Custom styles for the in-line editor
456 + */
457 +.viewbody > .cke_float {
458 + /* Shift the floating toolbar in order to match the content padding. */
459 + margin-right: floor((@grid-gutter-width / 2));
460 + margin-left: ceil((@grid-gutter-width / 2));
461 +}
462 +.cke_float .cke_top {
463 + border-radius: @border-radius-base;
464 +}
465 +
466 +/**
391 391   * Full-screen styles for the in-line editor
392 392   */
393 393  body[data-maximized="true"] {
... ... @@ -423,12 +423,6 @@
423 423   margin: 0 !important;
424 424   overflow-y: auto !important;
425 425   z-index: 9995;
426 -
427 - &:focus {
428 - /* Remove the focus border. */
429 - border-color: transparent !important;
430 - box-shadow: none !important;
431 - }
432 432   }
433 433   .cke_maximize_backdrop {
434 434   top: 0;
... ... @@ -448,3 +448,37 @@
448 448   z-index: 9995;
449 449   }
450 450  }
521 +
522 +/*
523 + * Override the CKEditor reset for the table border color.
524 + * The default border color from CKEditor is quite lacking on contrast.
525 + */
526 +.cke_editable.cke_show_borders table.cke_show_border,
527 +.cke_editable.cke_show_borders table.cke_show_border > tr > th,
528 +.cke_editable.cke_show_borders table.cke_show_border > tr > td,
529 +.cke_editable.cke_show_borders table.cke_show_border > thead > tr > th,
530 +.cke_editable.cke_show_borders table.cke_show_border > thead > tr > td,
531 +.cke_editable.cke_show_borders table.cke_show_border > tbody > tr > th,
532 +.cke_editable.cke_show_borders table.cke_show_border > tbody > tr > td,
533 +.cke_editable.cke_show_borders table.cke_show_border > tfoot > tr > th,
534 +.cke_editable.cke_show_borders table.cke_show_border > tfoot > tr > td {
535 + border-color: @table-border-color;
536 + border-style: solid;
537 +}
538 +
539 +/* CKEditor contains a CSS reset. It works with its own style sheets and does not use the ones in XWiki.
540 +However, we want `.sr-only` from XWiki to still be usable in our CKEditor environment.
541 +We need to redefine the XWiki styles of this class to have better priority than the CKEditor CSS reset.
542 +Without this, the elements with this class are still shown which would be different from the behaviour
543 +of `.sr-only` anywhere else in XWiki (as described in our doc).
544 +This redefinition allows for a more consistent behaviour of the `.sr-only` class. */
545 +.cke_reset_all .sr-only {
546 + position: absolute;
547 + width: 1px;
548 + height: 1px;
549 + padding: 0;
550 + margin: -1px;
551 + overflow: hidden;
552 + clip: rect(0, 0, 0, 0);
553 + border: 0;
554 +}