Modifications pour le document EditSheet

Modifié par Florent Charton le 2026/03/13 11:04

Gérer
- Copier
Actions
- Exporter
- Aperçu avant impression
Affichage

From 2.1 to 1.1 From 6.1 to 5.1

Depuis la version 5.1

modifié par Florent Charton
sur 2026/01/08 10:59

Commentaire de modification : Install extension [org.xwiki.platform:xwiki-platform-ckeditor-ui/17.4.8]

À 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]

Source
Rendu

Résumé

Propriétés de la Page (1 modifications, 0 ajouts, 0 suppressions)
Objets (3 modifications, 0 ajouts, 0 suppressions)

Détails

Propriétés de la Page

Contenu

@@ -1,0 +1,38 @@
++{{include reference="CKEditor.VelocityMacros"/}}
++
++{{velocity}}
++#if ($doc.fullName == 'CKEditor.EditSheet')
++  This is a sheet for editing the document content using [[CKEditor>>http://ckeditor.com/]].
++#else
++  {{html clean="false"}}
++  ## Include the auto-save styles.
++  #set ($discard = $xwiki.ssfx.use('js/xwiki/editors/autosave.css', true))
++  #if ("$!request.section" != '')
++    <div class="hidden">
++      <input type="hidden" name="section" value="$!escapetool.xml($request.section)"/>
++    </div>
++  #end
++  <div class="row">
++    <div class="cke-editMeta col-xs-12 col-md-7">
++      ## Add support for editing the page title (which is not available by default in Inline Form edit mode).
++      #set ($editor = 'wiki')
++      #template('editmeta.vm')
++      #set ($editor = 'inline')
++    </div>
++  </div>
++  ## The xwikieditcontent id is needed for the auto-save feature.
++  <div id="xwikieditcontent" data-autosave="true">
++    #set ($parameters = {
++      'content': $tdoc.content,
++      'attributes': {
++        'id': 'content',
++        'name': 'content',
++        'rows': 25,
++        'cols': 80
++      }
++    })
++    #ckeditor($parameters)
++  </div>
++  {{/html}}
++#end
++{{/velocity}}

XWiki.JavaScriptExtension[0]

Code

@@ -54,11 +54,9 @@
      }
      var uploadDisabled = element.hasAttribute('data-upload-disabled');
--    var startupFocus = element.hasAttribute('data-startup-focus');
      var config = {
        filebrowserUploadUrl: uploadDisabled ? '' : getUploadURL(sourceDocument, 'filebrowser'),
--      startupFocus,
        height: $(element).height(),
        // Used to resolve and serialize relative references. Also used to make HTTP requests with the right context.
        sourceDocument: sourceDocument,

XWiki.JavaScriptExtension[2]

Code

@@ -10,9 +10,7 @@
      container.find('.ckeditor-textarea').each(function() {
        // Wrap in try/catch so that a failure to load one editor doesn't affect the other editors.
        try {
--        createEditor(ckeditor, this).then(() => {
--          this.classList.remove('loading');
--        });
++        createEditor(ckeditor, this);
        } catch(e) {
          console.log(e);
        }

XWiki.StyleSheetExtension[0]

Code

@@ -12,13 +12,6 @@
    resize: none;
  }
--/* Hide the form action bar while the editor is loading in order to avoid UI flickering (because the editor may enhance
--  or replace the form action bar). */
--main > div:has(.ckeditor-textarea.loading) ~ .bottom-editor,
--#xwikicontent.loading ~ form#inplace-editing {
--  visibility: hidden;
--}
--
  /* Show the modal above the CKEditor dialogs */
  body > .modal-backdrop {
    z-index: 10040;
@@ -211,6 +211,8 @@
  a.cke_button.cke_button__xwiki-macro-edit > span.cke_button_icon.cke_button__xwiki-macro-edit_icon,
  a.cke_button.cke_button__xwiki-link-open > span.cke_button_icon.cke_button__xwiki-link-open_icon,
  a.cke_button.cke_button__insert > span.cke_button_icon.cke_button__insert_icon {
++  /* This is needed for XWiki versions older than 7.1M1 where we overwrite the icons path (see above). */
++  background-image: none !important;
    font-family: 'Glyphicons Halflings';
    position: relative;
    top: 1px;
@@ -317,7 +317,7 @@
    max-width: 64px;
    vertical-align: text-top;
  }
--/* The image still takes some space in all browsers even if there's no source specified. Let's make sure it's hidden.
++/* The image still takes some space in IE11 even if there's no source specified. Let's make sure it's hidden.
    See CKEDITOR-389: Missing space in the suggestions that appear while using the autocomplete function on IE 11 */
  .ckeditor-autocomplete-item-preview-wrapper img[src=""],
  .ckeditor-autocomplete-item-icon-wrapper img[src=""] {
@@ -370,89 +370,29 @@
  }
  .cke_contents > textarea.cke_source.cke_editable_inline {
++  border: 1px solid transparent;
++  border-radius: 0;
    box-shadow: none;
++  margin-top: -1px;
++  margin-left: -1px;
++
++  .form-control-focus();
  }
++.cke_contents.fake {
++  /* We need this to have the box shadow visible when the source area is focused. */
++  overflow: visible;
++}
++
  #xwikicontent + .cke_contents > textarea.cke_source.cke_editable_inline {
    /* Don't take the padding and the margin into account when computing the 100% width. */
    box-sizing: content-box;
    /* Make sure the Source area has the same width as the WYSIWYG area. */
--  margin-left: -@grid-gutter-width / 2;
--  margin-right: -@grid-gutter-width / 2;
++  margin-left: -@grid-gutter-width / 2 - 1px;
++  margin-right: -@grid-gutter-width / 2 - 1px;
  }
  /**
-- * Custom styles to match XWiki's Look & Feel
-- */
--.cke_chrome,
--.cke_chrome > .cke_inner {
--  border-radius: @border-radius-base;
--}
--
--.cke_chrome > .cke_inner > .cke_top {
--  border-top-right-radius: @border-radius-base;
--  border-top-left-radius: @border-radius-base;
--}
--
--.cke_chrome > .cke_inner > .cke_bottom {
--  border-bottom-right-radius: @border-radius-base;
--  border-bottom-left-radius: @border-radius-base;
--}
--
--/* The standalone WYSIWYG edit mode shows the form action toolbar right below the CKEditor instance used to edit the
--  document content. We make the bottom border rounded on the form action toolbar instead. */
--#xwikieditcontent > .cke_chrome,
--#xwikieditcontent > .cke_chrome > .cke_inner,
--#xwikieditcontent > .cke_chrome > .cke_inner > .cke_bottom {
--  border-bottom-right-radius: 0;
--  border-bottom-left-radius: 0;
--}
--
--a.cke_button,
--a.cke_combo_button {
--  border-radius: @border-radius-small;
--}
--
--.cke_panel,
--.cke_dialog_body,
--.cke_dialog a.cke_dialog_ui_button,
--.cke_dialog input.cke_dialog_ui_input_text,
--.cke_dialog select.cke_dialog_ui_input_select,
--.cke_dialog fieldset.cke_dialog_ui_fieldset,
--.cke_notification {
--  border-radius: @border-radius-base;
--}
--
--.cke_panel.cke_menu_panel,
--.cke_panel.cke_combopanel {
--  margin: 2px 0;
--}
--
--.cke_dialog_title,
--.cke_dialog a.cke_dialog_tab {
--  border-top-right-radius: @border-radius-base;
--  border-top-left-radius: @border-radius-base;
--}
--
--.cke_dialog_contents,
--.cke_dialog_footer {
--  border-bottom-right-radius: @border-radius-base;
--  border-bottom-left-radius: @border-radius-base;
--}
--
--/**
-- * Custom styles for the in-line editor
-- */
--.viewbody > .cke_float {
--  /* Shift the floating toolbar in order to match the content padding. */
--  margin-right: floor((@grid-gutter-width / 2));
--  margin-left: ceil((@grid-gutter-width / 2));
--}
--.cke_float .cke_top {
--  border-radius: @border-radius-base;
--}
--
--/**
   * Full-screen styles for the in-line editor
   */
  body[data-maximized="true"] {
@@ -488,6 +488,12 @@
      margin: 0 !important;
      overflow-y: auto !important;
      z-index: 9995;
++
++    &:focus {
++      /* Remove the focus border. */
++      border-color: transparent !important;
++      box-shadow: none !important;
++    }
    }
    .cke_maximize_backdrop {
      top: 0;
@@ -507,37 +507,3 @@
      z-index: 9995;
    }
  }
--
--/*
-- * Override the CKEditor reset for the table border color.
-- * The default border color from CKEditor is quite lacking on contrast.
-- */
--.cke_editable.cke_show_borders table.cke_show_border,
--.cke_editable.cke_show_borders table.cke_show_border > tr > th,
--.cke_editable.cke_show_borders table.cke_show_border > tr > td,
--.cke_editable.cke_show_borders table.cke_show_border > thead > tr > th,
--.cke_editable.cke_show_borders table.cke_show_border > thead > tr > td,
--.cke_editable.cke_show_borders table.cke_show_border > tbody > tr > th,
--.cke_editable.cke_show_borders table.cke_show_border > tbody > tr > td,
--.cke_editable.cke_show_borders table.cke_show_border > tfoot > tr > th,
--.cke_editable.cke_show_borders table.cke_show_border > tfoot > tr > td {
--  border-color: @table-border-color;
--  border-style: solid;
--}
--
--/* CKEditor contains a CSS reset. It works with its own style sheets and does not use the ones in XWiki.
--However, we want `.sr-only` from XWiki to still be usable in our CKEditor environment.
--We need to redefine the XWiki styles of this class to have better priority than the CKEditor CSS reset.
--Without this, the elements with this class are still shown which would be different from the behaviour
--of `.sr-only` anywhere else in XWiki (as described in our doc).
--This redefinition allows for a more consistent behaviour of the `.sr-only` class. */
--.cke_reset_all .sr-only {
--  position: absolute;
--  width: 1px;
--  height: 1px;
--  padding: 0;
--  margin: -1px;
--  overflow: hidden;
--  clip: rect(0, 0, 0, 0);
--  border: 0;
--}