Skip to Content

Changes for page EditSheet

Last modified by teamwire004 on 2025/10/14 07:03
From 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]
To 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]

Summary

Details

XWiki.JavaScriptExtension[0]
Code
... ... @@ -54,11 +54,9 @@
54 54   }
55 55  
56 56   var uploadDisabled = element.hasAttribute('data-upload-disabled');
57 - var startupFocus = element.hasAttribute('data-startup-focus');
58 58  
59 59   var config = {
60 60   filebrowserUploadUrl: uploadDisabled ? '' : getUploadURL(sourceDocument, 'filebrowser'),
61 - startupFocus,
62 62   height: $(element).height(),
63 63   // Used to resolve and serialize relative references. Also used to make HTTP requests with the right context.
64 64   sourceDocument: sourceDocument,
XWiki.JavaScriptExtension[2]
Code
... ... @@ -10,9 +10,7 @@
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).then(() => {
14 - this.classList.remove('loading');
15 - });
13 + createEditor(ckeditor, this);
16 16   } catch(e) {
17 17   console.log(e);
18 18   }
XWiki.StyleSheetExtension[0]
Code
... ... @@ -12,13 +12,6 @@
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 -
22 22  /* Show the modal above the CKEditor dialogs */
23 23  body > .modal-backdrop {
24 24   z-index: 10040;
... ... @@ -372,89 +372,29 @@
372 372  }
373 373  
374 374  .cke_contents > textarea.cke_source.cke_editable_inline {
368 + border: 1px solid transparent;
369 + border-radius: 0;
375 375   box-shadow: none;
371 + margin-top: -1px;
372 + margin-left: -1px;
373 +
374 + .form-control-focus();
376 376  }
377 377  
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 +
378 378  #xwikicontent + .cke_contents > textarea.cke_source.cke_editable_inline {
379 379   /* Don't take the padding and the margin into account when computing the 100% width. */
380 380   box-sizing: content-box;
381 381   /* Make sure the Source area has the same width as the WYSIWYG area. */
382 - margin-left: -@grid-gutter-width / 2;
383 - margin-right: -@grid-gutter-width / 2;
386 + margin-left: -@grid-gutter-width / 2 - 1px;
387 + margin-right: -@grid-gutter-width / 2 - 1px;
384 384  }
385 385  
386 386  /**
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 -/**
458 458   * Full-screen styles for the in-line editor
459 459   */
460 460  body[data-maximized="true"] {
... ... @@ -490,6 +490,12 @@
490 490   margin: 0 !important;
491 491   overflow-y: auto !important;
492 492   z-index: 9995;
426 +
427 + &:focus {
428 + /* Remove the focus border. */
429 + border-color: transparent !important;
430 + box-shadow: none !important;
431 + }
493 493   }
494 494   .cke_maximize_backdrop {
495 495   top: 0;
... ... @@ -509,37 +509,3 @@
509 509   z-index: 9995;
510 510   }
511 511  }
512 -
513 -/*
514 - * Override the CKEditor reset for the table border color.
515 - * The default border color from CKEditor is quite lacking on contrast.
516 - */
517 -.cke_editable.cke_show_borders table.cke_show_border,
518 -.cke_editable.cke_show_borders table.cke_show_border > tr > th,
519 -.cke_editable.cke_show_borders table.cke_show_border > tr > td,
520 -.cke_editable.cke_show_borders table.cke_show_border > thead > tr > th,
521 -.cke_editable.cke_show_borders table.cke_show_border > thead > tr > td,
522 -.cke_editable.cke_show_borders table.cke_show_border > tbody > tr > th,
523 -.cke_editable.cke_show_borders table.cke_show_border > tbody > tr > td,
524 -.cke_editable.cke_show_borders table.cke_show_border > tfoot > tr > th,
525 -.cke_editable.cke_show_borders table.cke_show_border > tfoot > tr > td {
526 - border-color: @table-border-color;
527 - border-style: solid;
528 -}
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 -}