Skip to Content

Changes for page EditSheet

Last modified by superadmin on 2025/09/10 13:21
From version 13.1
edited by superadmin
on 2025/09/10 13:21
Change comment: Install extension [org.xwiki.platform:xwiki-platform-ckeditor-ui/17.7.0]
To version 10.1
edited by Thomas Coelho (local)
on 2024/12/17 09:50
Change comment: Install extension [org.xwiki.platform:xwiki-platform-ckeditor-ui/16.10.1]

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.superadmin
1 +XWiki.coelho
Content
... ... @@ -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;
... ... @@ -179,25 +179,6 @@
179 179  }
180 180  
181 181  /**
182 - * Handle the layout and display of the warning message for headerless tables.
183 - * This message is added by the xwiki-table plugin.
184 - * Some of the default styles are just overridden by the CKEditor reset.
185 - */
186 -.cke_dialog_container span.box.warningmessage {
187 - .alert-warning;
188 - /* Default warning boxes are not meant to be used in a strict layout like the one of this table dialog.
189 - * We need an extra customization to avoid breaking this layout. */
190 - white-space: break-spaces;
191 - /* By default, the warning is not shown. */
192 - display: none;
193 -}
194 -
195 -/* When the value of the previous field is the one we want to avoid, we show the warning. */
196 -.cke_dialog_container tr:has(select [value=""]:checked) + tr span.box.warningmessage {
197 - display: unset;
198 -}
199 -
200 -/**
201 201   * Link Options Toggle
202 202   */
203 203  
... ... @@ -230,6 +230,8 @@
230 230  a.cke_button.cke_button__xwiki-macro-edit > span.cke_button_icon.cke_button__xwiki-macro-edit_icon,
231 231  a.cke_button.cke_button__xwiki-link-open > span.cke_button_icon.cke_button__xwiki-link-open_icon,
232 232  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;
233 233   font-family: 'Glyphicons Halflings';
234 234   position: relative;
235 235   top: 1px;
... ... @@ -336,7 +336,7 @@
336 336   max-width: 64px;
337 337   vertical-align: text-top;
338 338  }
339 -/* 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.
340 340   See CKEDITOR-389: Missing space in the suggestions that appear while using the autocomplete function on IE 11 */
341 341  .ckeditor-autocomplete-item-preview-wrapper img[src=""],
342 342  .ckeditor-autocomplete-item-icon-wrapper img[src=""] {
... ... @@ -412,77 +412,6 @@
412 412  }
413 413  
414 414  /**
415 - * Custom styles to match XWiki's Look & Feel
416 - */
417 -.cke_chrome,
418 -.cke_chrome > .cke_inner {
419 - border-radius: @border-radius-base;
420 -}
421 -
422 -.cke_chrome > .cke_inner > .cke_top {
423 - border-top-right-radius: @border-radius-base;
424 - border-top-left-radius: @border-radius-base;
425 -}
426 -
427 -.cke_chrome > .cke_inner > .cke_bottom {
428 - border-bottom-right-radius: @border-radius-base;
429 - border-bottom-left-radius: @border-radius-base;
430 -}
431 -
432 -/* The standalone WYSIWYG edit mode shows the form action toolbar right below the CKEditor instance used to edit the
433 - document content. We make the bottom border rounded on the form action toolbar instead. */
434 -#xwikieditcontent > .cke_chrome,
435 -#xwikieditcontent > .cke_chrome > .cke_inner,
436 -#xwikieditcontent > .cke_chrome > .cke_inner > .cke_bottom {
437 - border-bottom-right-radius: 0;
438 - border-bottom-left-radius: 0;
439 -}
440 -
441 -a.cke_button,
442 -a.cke_combo_button {
443 - border-radius: @border-radius-small;
444 -}
445 -
446 -.cke_panel,
447 -.cke_dialog_body,
448 -.cke_dialog a.cke_dialog_ui_button,
449 -.cke_dialog input.cke_dialog_ui_input_text,
450 -.cke_dialog select.cke_dialog_ui_input_select,
451 -.cke_dialog fieldset.cke_dialog_ui_fieldset,
452 -.cke_notification {
453 - border-radius: @border-radius-base;
454 -}
455 -
456 -.cke_panel.cke_menu_panel,
457 -.cke_panel.cke_combopanel {
458 - margin: 2px 0;
459 -}
460 -
461 -.cke_dialog_title,
462 -.cke_dialog a.cke_dialog_tab {
463 - border-top-right-radius: @border-radius-base;
464 - border-top-left-radius: @border-radius-base;
465 -}
466 -
467 -.cke_dialog_contents,
468 -.cke_dialog_footer {
469 - border-bottom-right-radius: @border-radius-base;
470 - border-bottom-left-radius: @border-radius-base;
471 -}
472 -
473 -/**
474 - * Custom styles for the in-line editor
475 - */
476 -.viewbody > .cke_float {
477 - /* Shift the floating toolbar in order to match the content padding. */
478 - margin-right: floor((@grid-gutter-width / 2));
479 - margin-left: ceil((@grid-gutter-width / 2));
480 -}
481 -.cke_float .cke_top {
482 - border-radius: @border-radius-base;
483 -}
484 -
485 -/**
486 486   * Full-screen styles for the in-line editor
487 487   */
488 488  body[data-maximized="true"] {
... ... @@ -518,6 +518,12 @@
518 518   margin: 0 !important;
519 519   overflow-y: auto !important;
520 520   z-index: 9995;
426 +
427 + &:focus {
428 + /* Remove the focus border. */
429 + border-color: transparent !important;
430 + box-shadow: none !important;
431 + }
521 521   }
522 522   .cke_maximize_backdrop {
523 523   top: 0;
... ... @@ -554,20 +554,3 @@
554 554   border-color: @table-border-color;
555 555   border-style: solid;
556 556  }
557 -
558 -/* CKEditor contains a CSS reset. It works with its own style sheets and does not use the ones in XWiki.
559 -However, we want `.sr-only` from XWiki to still be usable in our CKEditor environment.
560 -We need to redefine the XWiki styles of this class to have better priority than the CKEditor CSS reset.
561 -Without this, the elements with this class are still shown which would be different from the behaviour
562 -of `.sr-only` anywhere else in XWiki (as described in our doc).
563 -This redefinition allows for a more consistent behaviour of the `.sr-only` class. */
564 -.cke_reset_all .sr-only {
565 - position: absolute;
566 - width: 1px;
567 - height: 1px;
568 - padding: 0;
569 - margin: -1px;
570 - overflow: hidden;
571 - clip: rect(0, 0, 0, 0);
572 - border: 0;
573 -}