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 3.1
edited by teamwire004
on 2024/01/16 09:33
Change comment: Install extension [org.xwiki.platform:xwiki-platform-ckeditor-ui/14.10.13]

Summary

Details

XWiki.JavaScriptExtension[0]
Code
... ... @@ -1,49 +1,40 @@
1 1  /*
2 -#set ($ckeditorPath = $services.webjars.url('org.xwiki.contrib:application-ckeditor-webjar', 'ckeditor'))
3 -#set ($bootstrap3typeaheadPath = $services.webjars.url('org.webjars.npm:bootstrap-3-typeahead', 'bootstrap3-typeahead.min'))
4 -#set ($fastDiffPath = $services.webjars.url('org.webjars.npm:fast-diff', 'diff'))
5 -#if ($ckeditorPath.indexOf('?') >= 0)
6 - ## Before XWiki 7.1M1 the WebJar resource path was included in the query string which means we have to specify the
7 - ## '.js' extension (Require.js doesn't add it in this case).
8 - #set ($ckeditorPath = "${ckeditorPath}.js")
9 - #set ($bootstrap3typeaheadPath = "${bootstrap3typeaheadPath}.js")
10 - #set ($fastDiffPath = "${$fastDiffPath}.js")
2 +#if ($services.debug.minify)
3 + #set ($jsExtension = '.min')
4 +#else
5 + #set ($jsExtension = '')
11 11  #end
7 +#set ($ckeditorPath = $services.webjars.url('org.xwiki.platform:xwiki-platform-ckeditor-webjar', 'ckeditor'))
12 12  #set ($ckeditorBasePath = $stringtool.removeEnd($stringtool.removeEnd($ckeditorPath, '.js'), 'ckeditor'))
13 -#set ($resourcePickerBundlePath = "${ckeditorBasePath}plugins/xwiki-resource/resourcePicker.bundle.min")
14 -#set ($macroWizardBundlePath = "${ckeditorBasePath}plugins/xwiki-macro/macroWizard.bundle.min")
9 +#set ($resourcePickerBundlePath = "${ckeditorBasePath}plugins/xwiki-resource/resourcePicker.bundle$jsExtension")
10 +#set ($macroWizardBundlePath = "${ckeditorBasePath}plugins/xwiki-macro/macroWizard.bundle$jsExtension")
11 +#set ($imageWizardBundlePath = "${ckeditorBasePath}plugins/xwiki-image/imageWizard.bundle$jsExtension")
15 15  #set ($modalPath = "${ckeditorBasePath}plugins/xwiki-dialog/modal.min")
16 16  #set ($l10nPath = "${ckeditorBasePath}plugins/xwiki-localization/l10n.min")
17 -#if ($resourcePickerBundlePath.indexOf('?') >= 0)
18 - ## Before XWiki 7.1M1 the WebJar resource path was included in the query string which means we have to specify the
19 - ## '.js' extension (Require.js doesn't add it in this case).
20 - #set ($resourcePickerBundlePath = "${resourcePickerBundlePath}.js")
21 - #set ($macroWizardBundlePath = "${macroWizardBundlePath}.js")
22 - #set ($modalPath = "${modalPath}.js")
23 - #set ($l10nPath = "${l10nPath}.js")
24 -#end
25 25  */
26 26  require.config({
27 27   paths: {
28 28   ckeditor: '$!ckeditorPath',
29 - resource: '$!resourcePickerBundlePath',
30 - resourcePicker: '$!resourcePickerBundlePath',
31 - entityResourcePicker: '$!resourcePickerBundlePath',
32 - entityResourceSuggester: '$!resourcePickerBundlePath',
33 - entityResourceDisplayer: '$!resourcePickerBundlePath',
18 + resourcePickerBundle: '$!resourcePickerBundlePath',
34 34   modal: '$!modalPath',
35 35   l10n: '$!l10nPath',
36 36   macroWizard: '$!macroWizardBundlePath',
22 + imageWizard: '$!imageWizardBundlePath',
37 37   // This is used by the resource suggest picker on the link modal.
38 - 'bootstrap3-typeahead': '$!bootstrap3typeaheadPath',
24 + 'bootstrap3-typeahead': $jsontool.serialize($services.webjars.url('org.webjars.npm:bootstrap-3-typeahead',
25 + 'bootstrap3-typeahead.min')),
39 39   // This is used to preserve the selection when switching between WYSIWYG and Source modes.
40 - 'fast-diff': '$!fastDiffPath'
27 + 'fast-diff': $jsontool.serialize($services.webjars.url('org.webjars.npm:fast-diff', 'diff'))
41 41   },
29 + bundles: {
30 + 'resourcePickerBundle': ['resource', 'resourcePicker', 'entityResourcePicker', 'entityResourceSuggester',
31 + 'entityResourceDisplayer']
32 + },
42 42   shim: {
43 43   ckeditor: {
44 44   exports: 'CKEDITOR',
45 45   // This includes dependencies of the plugins bundled with the CKEditor code.
46 - deps: ['jquery', 'resource', 'resourcePicker', 'macroWizard']
37 + deps: ['jquery', 'resource', 'resourcePicker', 'macroWizard', 'imageWizard']
47 47   }
48 48   },
49 49   config: {
... ... @@ -72,52 +72,6 @@
72 72   "$!services.webjars.url('org.xwiki.platform:xwiki-platform-tree-webjar', 'require-config.min.js', {'evaluate': true})"
73 73  ], function($, ckeditor, xwikiMeta) {
74 74   var deferred = $.Deferred();
75 -
76 - var loadJavaScriptSkinExtensions = $jsontool.serialize($xwiki.getDocument('CKEditor.Config'
77 - ).getValue('loadJavaScriptSkinExtensions')) === 1;
78 -
79 - // See http://docs.ckeditor.com/#!/guide/dev_allowed_content_rules
80 - var allowedContentBySyntax = {
81 - 'xwiki/2.1': {
82 - '$1': {
83 - elements: {
84 - // Elements required because the editor input is a full HTML page.
85 - html: true, head: true, link: true, script: loadJavaScriptSkinExtensions, body: true,
86 - // Headings
87 - h1: true, h2: true, h3: true, h4: true, h5: true, h6: true,
88 - // Lists
89 - dl: true, ol: true, ul: true,
90 - // Tables
91 - table: true, tr: true, th: true, td: true,
92 - // Formatting
93 - span: true, strong: true, em: true, ins: true, del: true, sub: true, sup: true, tt: true, pre: true,
94 - // Others
95 - div: true, hr: true, p: true, a: true, img: true, blockquote: true
96 - },
97 - // The elements above can have any attribute, through the parameter (%%) syntax.
98 - attributes: '*',
99 - styles: '*',
100 - classes: '*'
101 - },
102 - '$2': {
103 - // The XWiki syntax doesn't support parameters for the following elements.
104 - elements: {br: true, dd: true, dt: true, li: true, tbody: true}
105 - },
106 - '$3': {
107 - // Wiki syntax macros can output any HTML.
108 - match: CKEDITOR.plugins.xwikiMacro.isMacroOutput,
109 - attributes: '*',
110 - styles: '*',
111 - classes: '*'
112 - }
113 - }
114 - };
115 - allowedContentBySyntax['xwiki/2.0'] = allowedContentBySyntax['xwiki/2.1'];
116 - // This is a hack, increasing the technical debt since the CKEditor module should not know about the Markdown
117 - // syntax. Actually it should not know either about the xwiki/2.0 and xwiki/2.1 syntaxes ;)
118 - // This should be fixed by implementing https://jira.xwiki.org/browse/CKEDITOR-319
119 - allowedContentBySyntax['markdown/1.2'] = allowedContentBySyntax['xwiki/2.1'];
120 -
121 121   var currentLocale = $('html').attr('lang') || '';
122 122  
123 123   // We have to pass the plugin that makes the request (the initiator) because the expected response can be different
... ... @@ -126,6 +126,7 @@
126 126   return document.getURL('get', $.param({
127 127   sheet: 'CKEditor.FileUploader',
128 128   outputSyntax: 'plain',
74 + // The syntax and language are important especially when the upload request creates a new document.
129 129   syntax: document.syntax,
130 130   language: currentLocale,
131 131   form_token: xwikiMeta.form_token,
... ... @@ -135,48 +135,26 @@
135 135  
136 136   // Extend the default CKEditor configuration with settings that depend on the source document.
137 137   var getConfig = function(element) {
84 + var sourceSyntax = $(element).attr('data-syntax');
138 138   var sourceDocument = XWiki.currentDocument;
139 - var sourceDocumentReference = $(element).attr('data-sourceDocumentReference');
140 - if (sourceDocumentReference) {
141 - sourceDocument = new XWiki.Document(XWiki.Model.resolve(sourceDocumentReference, XWiki.EntityType.DOCUMENT));
86 + sourceDocument.syntax = XWiki.docsyntax;
87 + var sourceDocumentReference = XWiki.Model.resolve($(element).attr('data-sourceDocumentReference'),
88 + XWiki.EntityType.DOCUMENT, XWiki.currentDocument.documentReference);
89 + if (!XWiki.currentDocument.documentReference.equals(sourceDocumentReference)) {
90 + sourceDocument = new XWiki.Document(sourceDocumentReference);
91 + // We assume the syntax of the source document is the same as the syntax of the edited content.
92 + sourceDocument.syntax = sourceSyntax;
142 142   }
143 - sourceDocument.syntax = $(element).attr('data-sourceDocumentSyntax');
94 +
95 + var uploadDisabled = element.hasAttribute('data-upload-disabled');
96 +
144 144   var config = {
145 - allowedContent: allowedContentBySyntax[sourceDocument.syntax],
146 - filebrowserUploadUrl: getUploadURL(sourceDocument, 'filebrowser'),
147 - // This is used in CKEditor.FileUploader so we must keep them in sync.
148 - fileTools_defaultFileName: '__fileCreatedFromDataURI__',
98 + filebrowserUploadUrl: uploadDisabled ? '' : getUploadURL(sourceDocument, 'filebrowser'),
149 149   height: $(element).height(),
150 - // CKEditor uses '-' (dash) as locale separator (between the language code and the country code).
151 - language: currentLocale.toLowerCase().replace('_', '-'),
152 - uploadUrl: getUploadURL(sourceDocument, 'filetools'),
153 - 'xwiki-link': {
154 - labelGenerator: sourceDocument.getURL('get', $.param({
155 - sheet: 'CKEditor.LinkLabelGenerator',
156 - outputSyntax: 'plain',
157 - language: currentLocale
158 - }))
159 - },
160 - 'xwiki-resource': {
161 - dispatcher: sourceDocument.getURL('get', $.param({
162 - sheet: 'CKEditor.ResourceDispatcher',
163 - outputSyntax: 'plain',
164 - language: currentLocale
165 - }))
166 - },
167 - 'xwiki-source': {
168 - htmlConverter: sourceDocument.getURL('get', $.param({
169 - sheet: 'CKEditor.HTMLConverter',
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 - language: currentLocale
176 - }))
177 - },
178 178   mentions: [
179 179   {
102 + // We use the source document to compute the feed URL because we want the suggested link references to be
103 + // relative to the edited document (we want the editor to output relative references as much as possible).
180 180   feed: sourceDocument.getURL('get', $.param({
181 181   sheet: 'CKEditor.LinkSuggestions',
182 182   outputSyntax: 'plain',
... ... @@ -197,20 +197,28 @@
197 197   '<div class="ckeditor-autocomplete-item-hint">{hint}</div>',
198 198   '</li>'].join(''),
199 199   outputTemplate: '<a href="{url}" data-reference="{typed}|-|{type}|-|{reference}">{label}</a>',
124 + followingSpace: true,
200 200   marker: '[',
201 201   minChars: 0,
202 202   itemsLimit: 6
203 203   }
204 - ]
205 - };
206 - if ($(element).attr('data-officeImporterSupported') === 'true') {
207 - config['xwiki-office'] = {
208 - importer: sourceDocument.getURL('get', $.param({
209 - sheet: 'CKEditor.OfficeImporter',
129 + ],
130 + // Used to resolve and serialize relative references. Also used to make HTTP requests with the right context.
131 + sourceDocument: sourceDocument,
132 + // The syntax of the edited content is not always the same as the syntax of the source document (which applies to
133 + // the source document content, but we might be editing something else, like an object property).
134 + sourceSyntax: sourceSyntax,
135 + uploadUrl: uploadDisabled ? '' : getUploadURL(sourceDocument, 'filetools'),
136 + 'xwiki-link': {
137 + // We use the source document to compute the link label generator URL because we want the link references to be
138 + // resolved relative to the edited document (as they were inserted).
139 + labelGenerator: sourceDocument.getURL('get', $.param({
140 + sheet: 'CKEditor.LinkLabelGenerator',
141 + outputSyntax: 'plain',
210 210   language: currentLocale
211 211   }))
212 - };
213 - }
144 + }
145 + };
214 214   return config;
215 215   };
216 216  
XWiki.JavaScriptExtension[1]
Code
... ... @@ -163,16 +163,3 @@
163 163   ckeEditMeta.attr('id', 'editMeta').addClass('col-md-pull-5')
164 164   .before($('#contentmenu').parent('.col-md-5').addClass('col-md-push-7'));
165 165  });
166 -
167 -// Activate the auto-save feature on XWiki versions older than 8.2RC1 (XE-1562), where CKEditor is not the default
168 -// WYSIWYG editor and thus it is loaded with a sheet (CKEditor.EditSheet). Note that for XWiki 8.2RC1 and 8.2 (where
169 -// CKEditor is the default WYSIWYG editor) the auto-save feature is not activated because the WYSIWYG edit mode doesn't
170 -// active it. This has been fixed in 8.2.1 and 8.3M1 (XWIKI-8614).
171 -// Note that we can't enable auto-save by loading autosave.js from the editing sheet (CKEditor.EditSheet) because on
172 -// older versions of XWiki (XWIKI-8614) autosave.js needs to be loaded after actionbuttons.js, which is loaded after the
173 -// editing sheet is rendered.
174 -require(['jquery'], function($) {
175 - if ($('#xwikieditcontent').data('autosave')) {
176 - require(["$xwiki.getSkinFile('js/xwiki/editors/autosave.js', true)"]);
177 - }
178 -});
XWiki.JavaScriptExtension[2]
Code
... ... @@ -1,19 +1,37 @@
1 1  require(['jquery', 'xwiki-ckeditor', 'xwiki-events-bridge'], function($, ckeditorPromise) {
2 + // Make sure we don't create the editors twice because this file can be loaded twice (by RequireJS, for in-place
3 + // editing, and as a JSX resource, for standalone editing).
4 + if (ckeditorPromise.__editSheetLoaded) {
5 + return;
6 + }
7 + ckeditorPromise.__editSheetLoaded = true;
8 +
9 + var createEditors = function(ckeditor, container) {
10 + container.find('.ckeditor-textarea').each(function() {
11 + // Wrap in try/catch so that a failure to load one editor doesn't affect the other editors.
12 + try {
13 + createEditor(ckeditor, this);
14 + } catch(e) {
15 + console.log(e);
16 + }
17 + });
18 + };
19 +
20 + var createEditor = function(ckeditor, textArea, instanceConfig) {
21 + var deferred = $.Deferred();
22 + var editor = ckeditor.replace(textArea, instanceConfig);
23 + editor.once('instanceReady', deferred.resolve.bind(deferred, editor));
24 + editor.once('reload', function(event) {
25 + event.data.promise = event.data.promise.then(createEditor.bind(null, ckeditor, textArea));
26 + });
27 + return deferred.promise();
28 + };
29 +
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));
31 + 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));
34 + createEditors(ckeditor, $(data.elements));
17 17   });
18 18   });
19 19  });
XWiki.StyleSheetExtension[0]
Code
... ... @@ -1,7 +1,7 @@
1 1  #template('colorThemeInit.vm')
2 2  
3 3  /*
4 -#set ($ckeditorSkinPath = $services.webjars.url('org.xwiki.contrib:application-ckeditor-webjar', 'skins/moono-lisa'))
4 +#set ($ckeditorSkinPath = $services.webjars.url('org.xwiki.platform:xwiki-platform-ckeditor-webjar', 'skins/moono-lisa'))
5 5  #if ($ckeditorSkinPath.indexOf('?') >= 0)
6 6   ## The WebJar resource path was specified in the query string before 7.1M1 which prevented the browser from resolving
7 7   ## relative paths. See XWIKI-10880 (A CSS file inside a webjar cannot use a resource from that webjar).
... ... @@ -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.platform:xwiki-platform-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}))