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 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]

Summary

Details

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;