Skip to Content

Changes for page EditSheet

Last modified by superadmin on 2025/02/27 10:46
From version 12.1
edited by superadmin
on 2025/02/27 10:46
Change comment: Install extension [org.xwiki.platform:xwiki-platform-ckeditor-ui/17.1.0]
To version 8.1
edited by Thomas Coelho (local)
on 2023/09/25 10:22
Change comment: Install extension [org.xwiki.platform:xwiki-platform-ckeditor-ui/15.7]

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,
... ... @@ -129,49 +129,5 @@
129 129   object[key] = newValue;
130 130   };
131 131  
132 - // See XWIKI-21351: Macros using RequireJS are not properly displayed by the standalone WYSIWYG editor even when
133 - // JavaScript is enabled.
134 - //
135 - // For each CKEditor instance that uses a separate DOM document for the edited content (i.e. classical iframe-based
136 - // editor) we overwrite the appendChild and insertBefore functions of the initial HEAD element in order to make sure
137 - // that RequireJS appends the script tags to the current HEAD element (because the HEAD element is overwritten each
138 - // time the edited content is reloaded, like when inserting a macro or switching between Source and WYSIWYG modes).
139 - //
140 - // We have to overwrite both appendChild and insertBefore because depending on the presence of the BASE element
141 - // RequireJS uses one or the other.
142 - ckeditor.on('instanceReady', ({editor}) => {
143 - if (editor.document.$ !== document) {
144 - // This editor instance is using a separate DOM document for editing which means it's a standalone editor.
145 - const initialHead = editor.document.$.head;
146 - const originalAppendChild = initialHead.appendChild;
147 - initialHead.appendChild = function() {
148 - const currentHead = editor.document.$.head;
149 - if (currentHead !== initialHead) {
150 - // The edited content has been reloaded. Append to the current HEAD.
151 - return currentHead.appendChild.apply(currentHead, arguments);
152 - } else {
153 - // Still using the initial HEAD so preserve the default behavior.
154 - originalAppendChild.apply(initialHead, arguments);
155 - }
156 - };
157 - const originalInsertBefore = initialHead.insertBefore;
158 - initialHead.insertBefore = function(newChild, existingChild) {
159 - const currentHead = editor.document.$.head;
160 - if (currentHead !== initialHead) {
161 - // The edited content has been reloaded. Normally the given existingChild should be a child of the initial
162 - // HEAD element (not the current one), but better check to be sure.
163 - if (existingChild.parentNode === currentHead) {
164 - return currentHead.insertBefore(newChild, existingChild);
165 - } else {
166 - return currentHead.appendChild.apply(newChild);
167 - }
168 - } else {
169 - // Still using the initial HEAD so preserve the default behavior.
170 - return originalInsertBefore.apply(initialHead, arguments);
171 - }
172 - };
173 - }
174 - });
175 -
176 176   return $.Deferred().resolve(ckeditor).promise();
177 177  });
XWiki.StyleSheetExtension[0]
Code
... ... @@ -204,6 +204,8 @@
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;
207 207   font-family: 'Glyphicons Halflings';
208 208   position: relative;
209 209   top: 1px;
... ... @@ -234,7 +234,7 @@
234 234   */
235 235  ul.cke_autocomplete_panel {
236 236   border: 1px solid rgba(0, 0, 0, 0.15);
237 - border-radius: @border-radius-base;
239 + border-radius: 4px;
238 238   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
239 239   font: inherit;
240 240   padding: 5px 0;
... ... @@ -286,7 +286,7 @@
286 286   width: 14px;
287 287  }
288 288  .ckeditor-autocomplete-item-icon-wrapper img {
289 - border-radius: @border-radius-small;
291 + border-radius: 3px;
290 290   max-height: 14px;
291 291   max-width: 14px;
292 292   vertical-align: text-top;
... ... @@ -305,12 +305,12 @@
305 305   justify-content: center;
306 306  }
307 307  .ckeditor-autocomplete-item-preview-wrapper img {
308 - border-radius: @border-radius-small;
310 + border-radius: 3px;
309 309   max-height: 64px;
310 310   max-width: 64px;
311 311   vertical-align: text-top;
312 312  }
313 -/* 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.
314 314   See CKEDITOR-389: Missing space in the suggestions that appear while using the autocomplete function on IE 11 */
315 315  .ckeditor-autocomplete-item-preview-wrapper img[src=""],
316 316  .ckeditor-autocomplete-item-icon-wrapper img[src=""] {
... ... @@ -446,37 +446,3 @@
446 446   z-index: 9995;
447 447   }
448 448  }
449 -
450 -/*
451 - * Override the CKEditor reset for the table border color.
452 - * The default border color from CKEditor is quite lacking on contrast.
453 - */
454 -.cke_editable.cke_show_borders table.cke_show_border,
455 -.cke_editable.cke_show_borders table.cke_show_border > tr > th,
456 -.cke_editable.cke_show_borders table.cke_show_border > tr > td,
457 -.cke_editable.cke_show_borders table.cke_show_border > thead > tr > th,
458 -.cke_editable.cke_show_borders table.cke_show_border > thead > tr > td,
459 -.cke_editable.cke_show_borders table.cke_show_border > tbody > tr > th,
460 -.cke_editable.cke_show_borders table.cke_show_border > tbody > tr > td,
461 -.cke_editable.cke_show_borders table.cke_show_border > tfoot > tr > th,
462 -.cke_editable.cke_show_borders table.cke_show_border > tfoot > tr > td {
463 - border-color: @table-border-color;
464 - border-style: solid;
465 -}
466 -
467 -/* CKEditor contains a CSS reset. It works with its own style sheets and does not use the ones in XWiki.
468 -However, we want `.sr-only` from XWiki to still be usable in our CKEditor environment.
469 -We need to redefine the XWiki styles of this class to have better priority than the CKEditor CSS reset.
470 -Without this, the elements with this class are still shown which would be different from the behaviour
471 -of `.sr-only` anywhere else in XWiki (as described in our doc).
472 -This redefinition allows for a more consistent behaviour of the `.sr-only` class. */
473 -.cke_reset_all .sr-only {
474 - position: absolute;
475 - width: 1px;
476 - height: 1px;
477 - padding: 0;
478 - margin: -1px;
479 - overflow: hidden;
480 - clip: rect(0, 0, 0, 0);
481 - border: 0;
482 -}