Aller au contenu

Modifications pour le document EditSheet

Modifié par Florent Charton le 2026/03/13 11:04
Depuis la version 4.1
modifié par Florent Charton
sur 2025/08/19 15:16
Commentaire de modification : Install extension [org.xwiki.platform:xwiki-platform-ckeditor-ui/17.4.3]
À la version 2.1
modifié par Florent Charton
sur 2024/08/08 18:44
Commentaire de modification : Install extension [org.xwiki.platform:xwiki-platform-ckeditor-ui/15.10.11]

Résumé

Détails

Propriétés de la Page
Contenu
... ... @@ -1,0 +1,38 @@
1 +{{include reference="CKEditor.VelocityMacros"/}}
2 +
3 +{{velocity}}
4 +#if ($doc.fullName == 'CKEditor.EditSheet')
5 + This is a sheet for editing the document content using [[CKEditor>>http://ckeditor.com/]].
6 +#else
7 + {{html clean="false"}}
8 + ## Include the auto-save styles.
9 + #set ($discard = $xwiki.ssfx.use('js/xwiki/editors/autosave.css', true))
10 + #if ("$!request.section" != '')
11 + <div class="hidden">
12 + <input type="hidden" name="section" value="$!escapetool.xml($request.section)"/>
13 + </div>
14 + #end
15 + <div class="row">
16 + <div class="cke-editMeta col-xs-12 col-md-7">
17 + ## Add support for editing the page title (which is not available by default in Inline Form edit mode).
18 + #set ($editor = 'wiki')
19 + #template('editmeta.vm')
20 + #set ($editor = 'inline')
21 + </div>
22 + </div>
23 + ## The xwikieditcontent id is needed for the auto-save feature.
24 + <div id="xwikieditcontent" data-autosave="true">
25 + #set ($parameters = {
26 + 'content': $tdoc.content,
27 + 'attributes': {
28 + 'id': 'content',
29 + 'name': 'content',
30 + 'rows': 25,
31 + 'cols': 80
32 + }
33 + })
34 + #ckeditor($parameters)
35 + </div>
36 + {{/html}}
37 +#end
38 +{{/velocity}}
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;
... ... @@ -211,6 +211,8 @@
211 211  a.cke_button.cke_button__xwiki-macro-edit > span.cke_button_icon.cke_button__xwiki-macro-edit_icon,
212 212  a.cke_button.cke_button__xwiki-link-open > span.cke_button_icon.cke_button__xwiki-link-open_icon,
213 213  a.cke_button.cke_button__insert > span.cke_button_icon.cke_button__insert_icon {
207 + /* This is needed for XWiki versions older than 7.1M1 where we overwrite the icons path (see above). */
208 + background-image: none !important;
214 214   font-family: 'Glyphicons Halflings';
215 215   position: relative;
216 216   top: 1px;
... ... @@ -317,7 +317,7 @@
317 317   max-width: 64px;
318 318   vertical-align: text-top;
319 319  }
320 -/* The image still takes some space in all browsers even if there's no source specified. Let's make sure it's hidden.
315 +/* The image still takes some space in IE11 even if there's no source specified. Let's make sure it's hidden.
321 321   See CKEDITOR-389: Missing space in the suggestions that appear while using the autocomplete function on IE 11 */
322 322  .ckeditor-autocomplete-item-preview-wrapper img[src=""],
323 323  .ckeditor-autocomplete-item-icon-wrapper img[src=""] {
... ... @@ -393,77 +393,6 @@
393 393  }
394 394  
395 395  /**
396 - * Custom styles to match XWiki's Look & Feel
397 - */
398 -.cke_chrome,
399 -.cke_chrome > .cke_inner {
400 - border-radius: @border-radius-base;
401 -}
402 -
403 -.cke_chrome > .cke_inner > .cke_top {
404 - border-top-right-radius: @border-radius-base;
405 - border-top-left-radius: @border-radius-base;
406 -}
407 -
408 -.cke_chrome > .cke_inner > .cke_bottom {
409 - border-bottom-right-radius: @border-radius-base;
410 - border-bottom-left-radius: @border-radius-base;
411 -}
412 -
413 -/* The standalone WYSIWYG edit mode shows the form action toolbar right below the CKEditor instance used to edit the
414 - document content. We make the bottom border rounded on the form action toolbar instead. */
415 -#xwikieditcontent > .cke_chrome,
416 -#xwikieditcontent > .cke_chrome > .cke_inner,
417 -#xwikieditcontent > .cke_chrome > .cke_inner > .cke_bottom {
418 - border-bottom-right-radius: 0;
419 - border-bottom-left-radius: 0;
420 -}
421 -
422 -a.cke_button,
423 -a.cke_combo_button {
424 - border-radius: @border-radius-small;
425 -}
426 -
427 -.cke_panel,
428 -.cke_dialog_body,
429 -.cke_dialog a.cke_dialog_ui_button,
430 -.cke_dialog input.cke_dialog_ui_input_text,
431 -.cke_dialog select.cke_dialog_ui_input_select,
432 -.cke_dialog fieldset.cke_dialog_ui_fieldset,
433 -.cke_notification {
434 - border-radius: @border-radius-base;
435 -}
436 -
437 -.cke_panel.cke_menu_panel,
438 -.cke_panel.cke_combopanel {
439 - margin: 2px 0;
440 -}
441 -
442 -.cke_dialog_title,
443 -.cke_dialog a.cke_dialog_tab {
444 - border-top-right-radius: @border-radius-base;
445 - border-top-left-radius: @border-radius-base;
446 -}
447 -
448 -.cke_dialog_contents,
449 -.cke_dialog_footer {
450 - border-bottom-right-radius: @border-radius-base;
451 - border-bottom-left-radius: @border-radius-base;
452 -}
453 -
454 -/**
455 - * Custom styles for the in-line editor
456 - */
457 -.viewbody > .cke_float {
458 - /* Shift the floating toolbar in order to match the content padding. */
459 - margin-right: floor((@grid-gutter-width / 2));
460 - margin-left: ceil((@grid-gutter-width / 2));
461 -}
462 -.cke_float .cke_top {
463 - border-radius: @border-radius-base;
464 -}
465 -
466 -/**
467 467   * Full-screen styles for the in-line editor
468 468   */
469 469  body[data-maximized="true"] {
... ... @@ -499,6 +499,12 @@
499 499   margin: 0 !important;
500 500   overflow-y: auto !important;
501 501   z-index: 9995;
426 +
427 + &:focus {
428 + /* Remove the focus border. */
429 + border-color: transparent !important;
430 + box-shadow: none !important;
431 + }
502 502   }
503 503   .cke_maximize_backdrop {
504 504   top: 0;
... ... @@ -518,37 +518,3 @@
518 518   z-index: 9995;
519 519   }
520 520  }
521 -
522 -/*
523 - * Override the CKEditor reset for the table border color.
524 - * The default border color from CKEditor is quite lacking on contrast.
525 - */
526 -.cke_editable.cke_show_borders table.cke_show_border,
527 -.cke_editable.cke_show_borders table.cke_show_border > tr > th,
528 -.cke_editable.cke_show_borders table.cke_show_border > tr > td,
529 -.cke_editable.cke_show_borders table.cke_show_border > thead > tr > th,
530 -.cke_editable.cke_show_borders table.cke_show_border > thead > tr > td,
531 -.cke_editable.cke_show_borders table.cke_show_border > tbody > tr > th,
532 -.cke_editable.cke_show_borders table.cke_show_border > tbody > tr > td,
533 -.cke_editable.cke_show_borders table.cke_show_border > tfoot > tr > th,
534 -.cke_editable.cke_show_borders table.cke_show_border > tfoot > tr > td {
535 - border-color: @table-border-color;
536 - border-style: solid;
537 -}
538 -
539 -/* CKEditor contains a CSS reset. It works with its own style sheets and does not use the ones in XWiki.
540 -However, we want `.sr-only` from XWiki to still be usable in our CKEditor environment.
541 -We need to redefine the XWiki styles of this class to have better priority than the CKEditor CSS reset.
542 -Without this, the elements with this class are still shown which would be different from the behaviour
543 -of `.sr-only` anywhere else in XWiki (as described in our doc).
544 -This redefinition allows for a more consistent behaviour of the `.sr-only` class. */
545 -.cke_reset_all .sr-only {
546 - position: absolute;
547 - width: 1px;
548 - height: 1px;
549 - padding: 0;
550 - margin: -1px;
551 - overflow: hidden;
552 - clip: rect(0, 0, 0, 0);
553 - border: 0;
554 -}