Skip to Content

Changes for page EditSheet

Last modified by teamwire005 on 2025/05/06 08:20
From version 4.1
edited by teamwire004
on 2024/07/12 13:08
Change comment: Install extension [org.xwiki.platform:xwiki-platform-ckeditor-ui/15.10.10]
To version 7.1
edited by teamwire005
on 2025/05/06 08:20
Change comment: Install extension [org.xwiki.platform:xwiki-platform-ckeditor-ui/16.10.6]

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.teamwire004
1 +XWiki.teamwire005
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.StyleSheetExtension[0]
Code
... ... @@ -388,6 +388,77 @@
388 388  }
389 389  
390 390  /**
391 + * Custom styles to match XWiki's Look & Feel
392 + */
393 +.cke_chrome,
394 +.cke_chrome > .cke_inner {
395 + border-radius: @border-radius-base;
396 +}
397 +
398 +.cke_chrome > .cke_inner > .cke_top {
399 + border-top-right-radius: @border-radius-base;
400 + border-top-left-radius: @border-radius-base;
401 +}
402 +
403 +.cke_chrome > .cke_inner > .cke_bottom {
404 + border-bottom-right-radius: @border-radius-base;
405 + border-bottom-left-radius: @border-radius-base;
406 +}
407 +
408 +/* The standalone WYSIWYG edit mode shows the form action toolbar right below the CKEditor instance used to edit the
409 + document content. We make the bottom border rounded on the form action toolbar instead. */
410 +#xwikieditcontent > .cke_chrome,
411 +#xwikieditcontent > .cke_chrome > .cke_inner,
412 +#xwikieditcontent > .cke_chrome > .cke_inner > .cke_bottom {
413 + border-bottom-right-radius: 0;
414 + border-bottom-left-radius: 0;
415 +}
416 +
417 +a.cke_button,
418 +a.cke_combo_button {
419 + border-radius: @border-radius-small;
420 +}
421 +
422 +.cke_panel,
423 +.cke_dialog_body,
424 +.cke_dialog a.cke_dialog_ui_button,
425 +.cke_dialog input.cke_dialog_ui_input_text,
426 +.cke_dialog select.cke_dialog_ui_input_select,
427 +.cke_dialog fieldset.cke_dialog_ui_fieldset,
428 +.cke_notification {
429 + border-radius: @border-radius-base;
430 +}
431 +
432 +.cke_panel.cke_menu_panel,
433 +.cke_panel.cke_combopanel {
434 + margin: 2px 0;
435 +}
436 +
437 +.cke_dialog_title,
438 +.cke_dialog a.cke_dialog_tab {
439 + border-top-right-radius: @border-radius-base;
440 + border-top-left-radius: @border-radius-base;
441 +}
442 +
443 +.cke_dialog_contents,
444 +.cke_dialog_footer {
445 + border-bottom-right-radius: @border-radius-base;
446 + border-bottom-left-radius: @border-radius-base;
447 +}
448 +
449 +/**
450 + * Custom styles for the in-line editor
451 + */
452 +.viewbody > .cke_float {
453 + /* Shift the floating toolbar in order to match the content padding. */
454 + margin-right: floor((@grid-gutter-width / 2));
455 + margin-left: ceil((@grid-gutter-width / 2));
456 +}
457 +.cke_float .cke_top {
458 + border-radius: @border-radius-base;
459 +}
460 +
461 +/**
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  }
516 +
517 +/*
518 + * Override the CKEditor reset for the table border color.
519 + * The default border color from CKEditor is quite lacking on contrast.
520 + */
521 +.cke_editable.cke_show_borders table.cke_show_border,
522 +.cke_editable.cke_show_borders table.cke_show_border > tr > th,
523 +.cke_editable.cke_show_borders table.cke_show_border > tr > td,
524 +.cke_editable.cke_show_borders table.cke_show_border > thead > tr > th,
525 +.cke_editable.cke_show_borders table.cke_show_border > thead > tr > td,
526 +.cke_editable.cke_show_borders table.cke_show_border > tbody > tr > th,
527 +.cke_editable.cke_show_borders table.cke_show_border > tbody > tr > td,
528 +.cke_editable.cke_show_borders table.cke_show_border > tfoot > tr > th,
529 +.cke_editable.cke_show_borders table.cke_show_border > tfoot > tr > td {
530 + border-color: @table-border-color;
531 + border-style: solid;
532 +}
533 +
534 +/* CKEditor contains a CSS reset. It works with its own style sheets and does not use the ones in XWiki.
535 +However, we want `.sr-only` from XWiki to still be usable in our CKEditor environment.
536 +We need to redefine the XWiki styles of this class to have better priority than the CKEditor CSS reset.
537 +Without this, the elements with this class are still shown which would be different from the behaviour
538 +of `.sr-only` anywhere else in XWiki (as described in our doc).
539 +This redefinition allows for a more consistent behaviour of the `.sr-only` class. */
540 +.cke_reset_all .sr-only {
541 + position: absolute;
542 + width: 1px;
543 + height: 1px;
544 + padding: 0;
545 + margin: -1px;
546 + overflow: hidden;
547 + clip: rect(0, 0, 0, 0);
548 + border: 0;
549 +}