Skip to Content

Changes for page EditSheet

Last modified by teamwire004 on 2025/10/14 07:03
From version 5.1
edited by teamwire005
on 2024/10/01 09:14
Change comment: Install extension [org.xwiki.platform:xwiki-platform-ckeditor-ui/15.10.12]
To version 9.1
edited by teamwire004
on 2025/10/14 07:03
Change comment: Install extension [org.xwiki.platform:xwiki-platform-ckeditor-ui/16.10.12]

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.teamwire005
1 +XWiki.teamwire004
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;
... ... @@ -365,29 +365,89 @@
365 365  }
366 366  
367 367  .cke_contents > textarea.cke_source.cke_editable_inline {
368 - border: 1px solid transparent;
369 - border-radius: 0;
370 370   box-shadow: none;
371 - margin-top: -1px;
372 - margin-left: -1px;
373 -
374 - .form-control-focus();
375 375  }
376 376  
377 -.cke_contents.fake {
378 - /* We need this to have the box shadow visible when the source area is focused. */
379 - overflow: visible;
380 -}
381 -
382 382  #xwikicontent + .cke_contents > textarea.cke_source.cke_editable_inline {
383 383   /* Don't take the padding and the margin into account when computing the 100% width. */
384 384   box-sizing: content-box;
385 385   /* Make sure the Source area has the same width as the WYSIWYG area. */
386 - margin-left: -@grid-gutter-width / 2 - 1px;
387 - margin-right: -@grid-gutter-width / 2 - 1px;
382 + margin-left: -@grid-gutter-width / 2;
383 + margin-right: -@grid-gutter-width / 2;
388 388  }
389 389  
390 390  /**
387 + * Custom styles to match XWiki's Look & Feel
388 + */
389 +.cke_chrome,
390 +.cke_chrome > .cke_inner {
391 + border-radius: @border-radius-base;
392 +}
393 +
394 +.cke_chrome > .cke_inner > .cke_top {
395 + border-top-right-radius: @border-radius-base;
396 + border-top-left-radius: @border-radius-base;
397 +}
398 +
399 +.cke_chrome > .cke_inner > .cke_bottom {
400 + border-bottom-right-radius: @border-radius-base;
401 + border-bottom-left-radius: @border-radius-base;
402 +}
403 +
404 +/* The standalone WYSIWYG edit mode shows the form action toolbar right below the CKEditor instance used to edit the
405 + document content. We make the bottom border rounded on the form action toolbar instead. */
406 +#xwikieditcontent > .cke_chrome,
407 +#xwikieditcontent > .cke_chrome > .cke_inner,
408 +#xwikieditcontent > .cke_chrome > .cke_inner > .cke_bottom {
409 + border-bottom-right-radius: 0;
410 + border-bottom-left-radius: 0;
411 +}
412 +
413 +a.cke_button,
414 +a.cke_combo_button {
415 + border-radius: @border-radius-small;
416 +}
417 +
418 +.cke_panel,
419 +.cke_dialog_body,
420 +.cke_dialog a.cke_dialog_ui_button,
421 +.cke_dialog input.cke_dialog_ui_input_text,
422 +.cke_dialog select.cke_dialog_ui_input_select,
423 +.cke_dialog fieldset.cke_dialog_ui_fieldset,
424 +.cke_notification {
425 + border-radius: @border-radius-base;
426 +}
427 +
428 +.cke_panel.cke_menu_panel,
429 +.cke_panel.cke_combopanel {
430 + margin: 2px 0;
431 +}
432 +
433 +.cke_dialog_title,
434 +.cke_dialog a.cke_dialog_tab {
435 + border-top-right-radius: @border-radius-base;
436 + border-top-left-radius: @border-radius-base;
437 +}
438 +
439 +.cke_dialog_contents,
440 +.cke_dialog_footer {
441 + border-bottom-right-radius: @border-radius-base;
442 + border-bottom-left-radius: @border-radius-base;
443 +}
444 +
445 +/**
446 + * Custom styles for the in-line editor
447 + */
448 +.viewbody > .cke_float {
449 + /* Shift the floating toolbar in order to match the content padding. */
450 + margin-right: floor((@grid-gutter-width / 2));
451 + margin-left: ceil((@grid-gutter-width / 2));
452 +}
453 +.cke_float .cke_top {
454 + border-radius: @border-radius-base;
455 +}
456 +
457 +/**
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;
... ... @@ -465,3 +465,20 @@
465 465   border-color: @table-border-color;
466 466   border-style: solid;
467 467  }
529 +
530 +/* CKEditor contains a CSS reset. It works with its own style sheets and does not use the ones in XWiki.
531 +However, we want `.sr-only` from XWiki to still be usable in our CKEditor environment.
532 +We need to redefine the XWiki styles of this class to have better priority than the CKEditor CSS reset.
533 +Without this, the elements with this class are still shown which would be different from the behaviour
534 +of `.sr-only` anywhere else in XWiki (as described in our doc).
535 +This redefinition allows for a more consistent behaviour of the `.sr-only` class. */
536 +.cke_reset_all .sr-only {
537 + position: absolute;
538 + width: 1px;
539 + height: 1px;
540 + padding: 0;
541 + margin: -1px;
542 + overflow: hidden;
543 + clip: rect(0, 0, 0, 0);
544 + border: 0;
545 +}