Changes for page EditSheet

Last modified by SuperNico Laub on 2025/09/18 17:55

From version 1.1
edited by superadmin
on 2025/05/22 17:44
Change comment: Install extension [org.xwiki.platform:xwiki-platform-ckeditor-ui/16.10.8]
To version 2.1
edited by SuperNico Laub
on 2025/09/18 17:55
Change comment: Install extension [org.xwiki.platform:xwiki-platform-ckeditor-ui/17.7.0]

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.superadmin
1 +xwiki:XWiki.supernico
Content
... ... @@ -1,38 +1,0 @@
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[2]
Code
... ... @@ -10,7 +10,9 @@
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);
13 + createEditor(ckeditor, this).then(() => {
14 + this.classList.remove('loading');
15 + });
14 14   } catch(e) {
15 15   console.log(e);
16 16   }
XWiki.StyleSheetExtension[0]
Code
... ... @@ -12,6 +12,13 @@
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 +
15 15  /* Show the modal above the CKEditor dialogs */
16 16  body > .modal-backdrop {
17 17   z-index: 10040;
... ... @@ -172,6 +172,25 @@
172 172  }
173 173  
174 174  /**
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 +/**
175 175   * Link Options Toggle
176 176   */
177 177  
... ... @@ -204,8 +204,6 @@
204 204  a.cke_button.cke_button__xwiki-macro-edit > span.cke_button_icon.cke_button__xwiki-macro-edit_icon,
205 205  a.cke_button.cke_button__xwiki-link-open > span.cke_button_icon.cke_button__xwiki-link-open_icon,
206 206  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;
209 209   font-family: 'Glyphicons Halflings';
210 210   position: relative;
211 211   top: 1px;
... ... @@ -312,7 +312,7 @@
312 312   max-width: 64px;
313 313   vertical-align: text-top;
314 314  }
315 -/* The image still takes some space in IE11 even if there's no source specified. Let's make sure it's hidden.
339 +/* The image still takes some space in all browsers even if there's no source specified. Let's make sure it's hidden.
316 316   See CKEDITOR-389: Missing space in the suggestions that appear while using the autocomplete function on IE 11 */
317 317  .ckeditor-autocomplete-item-preview-wrapper img[src=""],
318 318  .ckeditor-autocomplete-item-icon-wrapper img[src=""] {