Skip to Content

Changes for page EditSheet

Last modified by teamwire005 on 2025/05/06 08:20
From version 2.1
edited by teamwire004
on 2024/01/16 09:21
Change comment: Install extension [org.xwiki.contrib:application-ckeditor-ui/1.48]
To version 1.1
edited by teamwire001
on 2021/06/11 07:39
Change comment: Install extension [org.xwiki.contrib:application-ckeditor-ui/1.53.2]

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.teamwire004
1 +XWiki.teamwire001
XWiki.JavaScriptExtension[0]
Code
... ... @@ -110,7 +110,8 @@
110 110   styles: '*',
111 111   classes: '*'
112 112   }
113 - }
113 + },
114 + 'plain/1.0': ';'
114 114   };
115 115   allowedContentBySyntax['xwiki/2.0'] = allowedContentBySyntax['xwiki/2.1'];
116 116   // This is a hack, increasing the technical debt since the CKEditor module should not know about the Markdown
... ... @@ -143,6 +143,7 @@
143 143   sourceDocument.syntax = $(element).attr('data-sourceDocumentSyntax');
144 144   var config = {
145 145   allowedContent: allowedContentBySyntax[sourceDocument.syntax],
147 + editorplaceholder: $jsontool.serialize($services.localization.render('ckeditor.content.placeholder')),
146 146   filebrowserUploadUrl: getUploadURL(sourceDocument, 'filebrowser'),
147 147   // This is used in CKEditor.FileUploader so we must keep them in sync.
148 148   fileTools_defaultFileName: '__fileCreatedFromDataURI__',
... ... @@ -168,10 +168,6 @@
168 168   htmlConverter: sourceDocument.getURL('get', $.param({
169 169   sheet: 'CKEditor.HTMLConverter',
170 170   outputSyntax: 'plain',
171 - // Make sure we use the syntax specified when the editor was loaded. This is especially important when the
172 - // edited document is new (unsaved) because we want the converter to use the syntax specified by the template
173 - // rather than the default wiki syntax.
174 - sourceSyntax: sourceDocument.syntax,
175 175   language: currentLocale
176 176   }))
177 177   },
XWiki.JavaScriptExtension[2]
Code
... ... @@ -1,19 +1,30 @@
1 1  require(['jquery', 'xwiki-ckeditor', 'xwiki-events-bridge'], function($, ckeditorPromise) {
2 + var createEditors = function(ckeditor, container) {
3 + container.find('.ckeditor-textarea').each(function() {
4 + // Wrap in try/catch so that a failure to load one editor doesn't affect the other editors.
5 + try {
6 + createEditor(ckeditor, this);
7 + } catch(e) {
8 + console.log(e);
9 + }
10 + });
11 + };
12 +
13 + var createEditor = function(ckeditor, textArea, instanceConfig) {
14 + var deferred = $.Deferred();
15 + var editor = ckeditor.replace(textArea, instanceConfig);
16 + editor.once('instanceReady', $.proxy(deferred, 'resolve', editor));
17 + editor.once('reload', function(event) {
18 + event.data.promise = event.data.promise.then($.proxy(createEditor, null, ckeditor, textArea));
19 + });
20 + return deferred.promise();
21 + };
22 +
2 2   ckeditorPromise.done(function(ckeditor) {
3 - var createEditors = function(container) {
4 - container.find('.ckeditor-textarea').each(function() {
5 - // Wrap in try/catch so that a failure to load one editor doesn't affect the other editors.
6 - try {
7 - ckeditor.replace(this);
8 - } catch(e) {
9 - console.log(e);
10 - }
11 - });
12 - };
13 - createEditors($(body));
24 + createEditors(ckeditor, $(body));
14 14   // Make sure we don't register the event listener multiple times (in case this code is loaded multiple times).
15 15   $(document).off('xwiki:dom:updated.ckeditor').on('xwiki:dom:updated.ckeditor', function(event, data) {
16 - createEditors($(data.elements));
27 + createEditors(ckeditor, $(data.elements));
17 17   });
18 18   });
19 19  });
XWiki.StyleSheetExtension[0]
Code
... ... @@ -71,7 +71,7 @@
71 71  }
72 72  
73 73  /**
74 - * Full-screen styles.
74 + * Full-screen styles (for the standalone / classic editor).
75 75   */
76 76  
77 77  .fullScreenEditLinkContainer {
... ... @@ -84,7 +84,7 @@
84 84   padding: .5em;
85 85  }
86 86  
87 -/* The 'skin-flamingo' class name is removed from the body element in full-screen mode so we need to fix the auto-save
87 +/* The 'skin-flamingo' class name is removed from the body element in full-screen mode so we need to fix the auto-save
88 88   styles. */
89 89  .cke_maximized #autosaveControl input.autosave-frequency {
90 90   width: 3em;
... ... @@ -309,6 +309,11 @@
309 309   max-width: 14px;
310 310   vertical-align: text-top;
311 311  }
312 +/* The image still takes some space in IE11 even if there's no source specified. Let's make sure it's hidden.
313 + See CKEDITOR-389: Missing space in the suggestions that appear while using the autocomplete function on IE 11 */
314 +.ckeditor-autocomplete-item-icon-wrapper img[src=""] {
315 + display: none;
316 +}
312 312  .ckeditor-autocomplete-item-hint {
313 313   color: $theme.textSecondaryColor;
314 314   font-size: smaller;
XWiki.StyleSheetExtension[1]
Code
... ... @@ -18,9 +18,7 @@
18 18   margin-top: -1px;
19 19   margin-left: -1px;
20 20  
21 - &:focus {
22 - .form-control-focus();
23 - }
21 + .form-control-focus();
24 24  }
25 25  
26 26  .cke_contents.fake {
... ... @@ -35,3 +35,65 @@
35 35   margin-left: -@grid-gutter-width / 2 - 1px;
36 36   margin-right: -@grid-gutter-width / 2 - 1px;
37 37  }
36 +
37 +/**
38 + * Full-screen styles for the in-line editor
39 + */
40 +body[data-maximized="true"] {
41 + overflow: hidden;
42 +
43 + .cke_maximize_backdrop,
44 + .cke_toolBar_active,
45 + .cke_editable_active,
46 + .cke_actionBar_active {
47 + position: fixed !important;
48 + right: 0 !important;
49 + left: 0 !important;
50 + }
51 +
52 + /*
53 + * The tool bar
54 + */
55 + .cke_toolBar_active {
56 + /* We have to use !important in order to overwrite the in-line styles. */
57 + display: block !important;
58 + top: 0 !important;
59 + }
60 +
61 + /*
62 + * The editing area
63 + */
64 + .cke_maximize_backdrop,
65 + .cke_editable_active {
66 + background-color: @xwiki-page-content-bg;
67 + }
68 + .cke_editable_active {
69 + box-sizing: border-box !important;
70 + margin: 0 !important;
71 + overflow-y: auto !important;
72 + z-index: 9995;
73 +
74 + &:focus {
75 + /* Remove the focus border. */
76 + border-color: transparent !important;
77 + box-shadow: none !important;
78 + }
79 + }
80 + .cke_maximize_backdrop {
81 + top: 0;
82 + bottom: 0;
83 + z-index: 99;
84 + }
85 +
86 + /*
87 + * The action buttons
88 + */
89 + .cke_actionBar_active {
90 + background-color: @xwiki-background-secondary-color;
91 + border: 1px solid @xwiki-border-color;
92 + bottom: 0;
93 + /* Reduce a bit the padding. */
94 + padding: .5em;
95 + z-index: 9995;
96 + }
97 +}
XWiki.UIExtensionClass[0]
Extension Parameters
... ... @@ -1,2 +1,2 @@
1 1  id=xwiki-ckeditor
2 -path=$xwiki.getURL('CKEditor.EditSheet', 'jsx', $escapetool.url({'v': $services.extension.installed.getInstalledExtension('org.xwiki.contrib:application-ckeditor-ui', "wiki:$xcontext.database").version.value}))
2 +path=$xwiki.getURL('CKEditor.EditSheet', 'jsx', $escapetool.url({'v': $services.extension.installed.getInstalledExtension('org.xwiki.contrib:application-ckeditor-ui', "wiki:$xcontext.database").version.value, 'xwiki-version': $services.extension.core.getCoreExtension('org.xwiki.platform:xwiki-platform-tree-webjar').version.value, 'fast-diff-version': $services.extension.installed.getInstalledExtension('org.webjars.npm:fast-diff', "wiki:$xcontext.database").version.value, 'bs3typeahead-version': $services.extension.installed.getInstalledExtension('org.webjars.npm:bootstrap-3-typeahead', "wiki:$xcontext.database").version.value}))