Add a tab in the image selection step of the new CKEditor Image Dialog

Usage

The extension point adds a tab inside the image selection modal of the new CKEditor Image Dialog.

Definition

This Extension Point is contributed by this extension and was added in version 1.63 of that extension.

Category

Tab

Extension Id

org.xwiki.contrib.ckeditor.plugins.imageSelector

Content to be provided

The minimal code to add to add in the extension point should look like this:

{velocity}}
## Provides the Javascript code to notify the image selector of the selected image.
#set ($discard = $xwiki.jsx.use('Some.JXS.XObject'))
## TODO: add the html content of the selector
{{/velocity}}

Javascript

require(['imageSelector'], function (imageSelector) {
 // Notify the image selector that some images has been selected. Note that currently we only support a single image selection, so the array must be of size 1 (other items are ignored).
 // After this call, the button to the next step is enabled.
 imageSelector.updateSelectedImageReferences([...], element);
 // Notify the image selector that no image is currently selected.
 // After this call, the button to the next step is disabled.
 imageSelector.updateSelectedImageReferences([], element);
});

ImageSelector API

updateSelectedImageReferences

Takes an array of attachment references in parameter to be inserted in the document.

The element parameter is used to resolve the document to which to add the attachment based on the metadata of the modal containing the element.

createLoader

Helper to display a loader to the user for a file selector field.

The element parameter is used to resolve the document to which to add the attachment based on the metadata of the modal containing the element.

Example:

imageSelector.createLoader($("selector").prop('files')[0], {
  onSuccess: function (entityReference) {;
   new XWiki.widgets.Notification('Success Message', 'done');
  },
  onError: function () {
   new XWiki.widgets.Notification('Error message', 'error');
  },
  onAbort: function () {
   new XWiki.widgets.Notification('Abort message', 'error');
  }
}, element);

getDocumentReference

Helper to get the document reference of the current editor.

The element parameter is used to resolve the document to which to add the attachment based on the metadata of the modal containing the element.

Example:

imageSelector.getDocumentReference(element)

Parameters to be provided

• priority: the order in which the tabs will be displayed. The lower the number is, the more on the left the item is. Examples of correct orders: 100, 200 Please let enough room to add other UIX between existing ones and your own. The UIX with the lowest priority is opened by default
• title: the title of the tab
• id: the identifier of the tab