Modifications pour le document AdminSection

Modifié par Florent Charton le 2025/08/19 15:16

Depuis la version 3.1
modifié par Florent Charton
sur 2025/08/19 15:16
Commentaire de modification : Install extension [org.xwiki.platform:xwiki-platform-ckeditor-ui/17.4.3]
À la version 2.1
modifié par Florent Charton
sur 2024/08/08 18:44
Commentaire de modification : Install extension [org.xwiki.platform:xwiki-platform-ckeditor-ui/15.10.11]

Résumé

Détails

Propriétés de la Page
Contenu
... ... @@ -13,6 +13,7 @@
13 13  {{velocity}}
14 14  {{html clean="false"}}
15 15  #set ($discard = $xwiki.ssx.use('CKEditor.AdminSection'))
16 +#set ($discard = $xwiki.jsx.use('CKEditor.AdminSection'))
16 16  #set ($configDoc = $xwiki.getDocument('CKEditor.Config'))
17 17  <form id="ckeditorConfig" method="post" action="$configDoc.getURL('save')" class="xform"
18 18   data-editorId="ckeditor" data-label="CKEditor">
XWiki.StyleSheetExtension[0]
Code
... ... @@ -1,3 +1,21 @@
1 +/* Hide the page content until the JavaScript code is loaded and executed. Also hide unnecessary headings.
2 + This is not needed anymore starting with XWiki 9.2RC1. */
3 +#admin-page-content > form,
4 +#admin-page-content > .codeToExecute,
5 +#admin-page-content > h1.wikigeneratedheader,
6 +#admin-page-content > h2.wikigeneratedheader {
7 + display: none;
8 +}
9 +#admin-page-content.visible > form,
10 +#admin-page-content.visible > .codeToExecute {
11 + display: block;
12 +}
13 +
1 1  .tab-content .ckeditor-config {
2 2   margin-top: 1em;
3 3  }
17 +
18 +/* Fix the styles that come from the GWT editor section (XWiki <9.2RC1). */
19 +form.xform .ckeditor-config dd input[type="text"] {
20 + width: 100% !important;
21 +}
XWiki.JavaScriptExtension[0]
Mode de mise en cache
... ... @@ -1,0 +1,1 @@
1 +long
Code
... ... @@ -1,0 +1,49 @@
1 +require(['jquery', 'bootstrap'], function($) {
2 + var adminPageContent = $('#admin-page-content');
3 + var forms = adminPageContent.find('form');
4 + // Check if we need to enhance the WYSIWYG administration section with tabs (one tab for each editor).
5 + if (forms.length < 2 || forms.is('#wysiwyg')) {
6 + // Either there is only one editor available or the WYSIWYG administration section handles the tabs itself
7 + // (XWiki 9.2RC1+). Leave the administration page as it is.
8 + // This JavaScript code is executed after the page has been loaded so in order to avoid flickering UI we hide the
9 + // page content from CSS and restore it back here.
10 + adminPageContent.addClass('visible');
11 + return;
12 + }
13 +
14 + var formIdToEditorName = {
15 + 'wysiwyg_XWiki.WysiwygEditorConfig': 'GWT',
16 + 'ckeditorConfig': 'CKEditor'
17 + };
18 +
19 + // Use tabs to configure each of the available editors.
20 + var editorTabList = $('<ul class="nav nav-tabs" role="tablist"></ul>').prependTo(adminPageContent);
21 + var editorTabContent = $('<div class="tab-content">').insertAfter(editorTabList);
22 + forms.each(function() {
23 + // The Bootstrap Tab plugin uses the tab id in a CSS selector and since dot is a special character we need to avoid
24 + // it (the Tab plugin expects a valid id string and so it doesn't perform any escaping).
25 + var tabId = $(this).attr('id').replace('.', '_') + '_tab';
26 + // Add the tab name.
27 + var formId = $(this).attr('id');
28 + var tabName = formIdToEditorName[formId] || formId;
29 + $('<li role="presentation"><a role="tab" data-toggle="tab"></a></li>').appendTo(editorTabList)
30 + .find('a').attr({
31 + 'href': '#' + tabId,
32 + 'data-editorId': tabName.toLowerCase()
33 + }).text(tabName)
34 + .on('click', function(event) {
35 + event.preventDefault();
36 + $(this).tab('show');
37 + });
38 + // Add the tab content.
39 + $('<div role="tabpanel" class="tab-pane"></div>').attr('id', tabId).appendTo(editorTabContent)
40 + .append($(this).closest('#admin-page-content > *'));
41 + });
42 +
43 + // Show the configuration for the active editor, or the first one if none is active.
44 + var activeTab = editorTabList.find('a[data-editorId="$!services.edit.syntaxContent.defaultWysiwygEditor.descriptor.id"]');
45 + if (!activeTab.length) {
46 + activeTab = editorTabList.find('a').first();
47 + }
48 + activeTab.tab('show');
49 +});
Parser le contenu
... ... @@ -1,0 +1,1 @@
1 +Oui
Utiliser cette extension
... ... @@ -1,0 +1,1 @@
1 +onDemand