Skip to Content

Changes for page EditSheet

Last modified by teamwire004 on 2025/07/01 06:50
From version 6.1
edited by teamwire004
on 2025/02/04 08:17
Change comment: Install extension [org.xwiki.platform:xwiki-platform-ckeditor-ui/16.10.3]
To version 8.1
edited by teamwire004
on 2025/07/01 06:50
Change comment: Install extension [org.xwiki.platform:xwiki-platform-ckeditor-ui/16.10.9]

Summary

Details

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;
... ... @@ -388,6 +388,77 @@
388 388  }
389 389  
390 390  /**
398 + * Custom styles to match XWiki's Look & Feel
399 + */
400 +.cke_chrome,
401 +.cke_chrome > .cke_inner {
402 + border-radius: @border-radius-base;
403 +}
404 +
405 +.cke_chrome > .cke_inner > .cke_top {
406 + border-top-right-radius: @border-radius-base;
407 + border-top-left-radius: @border-radius-base;
408 +}
409 +
410 +.cke_chrome > .cke_inner > .cke_bottom {
411 + border-bottom-right-radius: @border-radius-base;
412 + border-bottom-left-radius: @border-radius-base;
413 +}
414 +
415 +/* The standalone WYSIWYG edit mode shows the form action toolbar right below the CKEditor instance used to edit the
416 + document content. We make the bottom border rounded on the form action toolbar instead. */
417 +#xwikieditcontent > .cke_chrome,
418 +#xwikieditcontent > .cke_chrome > .cke_inner,
419 +#xwikieditcontent > .cke_chrome > .cke_inner > .cke_bottom {
420 + border-bottom-right-radius: 0;
421 + border-bottom-left-radius: 0;
422 +}
423 +
424 +a.cke_button,
425 +a.cke_combo_button {
426 + border-radius: @border-radius-small;
427 +}
428 +
429 +.cke_panel,
430 +.cke_dialog_body,
431 +.cke_dialog a.cke_dialog_ui_button,
432 +.cke_dialog input.cke_dialog_ui_input_text,
433 +.cke_dialog select.cke_dialog_ui_input_select,
434 +.cke_dialog fieldset.cke_dialog_ui_fieldset,
435 +.cke_notification {
436 + border-radius: @border-radius-base;
437 +}
438 +
439 +.cke_panel.cke_menu_panel,
440 +.cke_panel.cke_combopanel {
441 + margin: 2px 0;
442 +}
443 +
444 +.cke_dialog_title,
445 +.cke_dialog a.cke_dialog_tab {
446 + border-top-right-radius: @border-radius-base;
447 + border-top-left-radius: @border-radius-base;
448 +}
449 +
450 +.cke_dialog_contents,
451 +.cke_dialog_footer {
452 + border-bottom-right-radius: @border-radius-base;
453 + border-bottom-left-radius: @border-radius-base;
454 +}
455 +
456 +/**
457 + * Custom styles for the in-line editor
458 + */
459 +.viewbody > .cke_float {
460 + /* Shift the floating toolbar in order to match the content padding. */
461 + margin-right: floor((@grid-gutter-width / 2));
462 + margin-left: ceil((@grid-gutter-width / 2));
463 +}
464 +.cke_float .cke_top {
465 + border-radius: @border-radius-base;
466 +}
467 +
468 +/**
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;