カスタムを使用して、ContentReference画像のクイックアクションを作成します

 define("quickactions/editors/ImageLinks", [
     "dojo/_base/declare", "dojo/when", "dojo/on", "dojo/topic", "dojo/dom-class",
     "epi/Url", "epi/routes", "epi/shell/DialogService",
     "epi-cms/core/ContentReference", "epi-cms/widget/MediaSelector",
     "epi-cms/contentediting/_ContextualContentContextMixin",
     "epi-cms/widget/UploadUtil",
     "dojo/text!./templates/ThumbnailSelector.html",
     "xstyle/css!./style.css",
     "epi/i18n!epi/cms/nls/episerver.cms.widget.thumbnailselector"
 ], function (
     declare, when, on, topic, domClass,
     Url, routes, dialogService,
     ContentReference, MediaSelector,
     _ContextualContentContextMixin,
     UploadUtil,
     template, styles, resources
 ) {
     const defaultImageUrl = require.toUrl("epi-cms/themes/sleek/images/default-image.png");

     const DropFileMixin = declare(_ContextualContentContextMixin, {
         _dialogService: null,
         allowedExtensions: [],

         _onDrop(evt, fileList) {
             const filtered = UploadUtil.filterFileOnly(fileList);
             if (!filtered || filtered.length !== 1) {
                 this._dialogService.alert(resources.singleimage);
                 return;
             }

             const extension = filtered[0].name.split(".").pop().toLowerCase();
             if (!this.allowedExtensions.includes(extension)) {
                 this._dialogService.alert(resources.wrongfileformat);
                 return;
             }

             when(this._refreshTargetUploadContent()).then(() => {
                 this.uploadCommand.set("fileList", filtered);
                 this.uploadCommand.execute();
             });
         }
     });

     return declare([MediaSelector, DropFileMixin], {
         resources,
         templateString: template,

         _getThumbnailUrl(content) {
             if (!content.capabilities.generateThumbnail) {
                 return content.thumbnailUrl || defaultImageUrl;
             }

             const url = new Url(routes.getActionPath({
                 moduleArea: "CMS",
                 controller: "Thumbnail",
                 action: "Generate"
             }));

             url.query = {
                 contentLink: content.contentLink,
                 "epi.preventCache": Date.now()
             };

             this.quickEditButton.style.display = "block";
             this.editButton.style.display = "block";

             return url.toString();
         },

         _onQuickEditButtonClick() {
             const contentLink = this.quickEditButton.getAttribute("data-id");
             if (!contentLink) {
                 console.warn("No contentLink ID found.");
                 return;
             }

             require([
                 "episerver-labs-block-enhancements/inline-editing/form-dialog",
                 "episerver-labs-block-enhancements/inline-editing/block-edit-form-container",
                 "episerver-labs-block-enhancements/inline-editing/commands/inline-publish",
                 "dojo/on", "dojo/when", "epi/dependency",
                 "epi-cms/core/ContentReference",
                 "epi-cms/contentediting/ContentActionSupport"
             ], function (
                 FormDialog, FormContainer, InlinePublish,
                 on, when, dependency, ContentReference, ContentActionSupport
             ) {
                 const contentRef = ContentReference.toContentReference(contentLink);
                 const store = dependency.resolve("epi.storeregistry").get("epi.cms.content.light");

                 store.get(contentRef).then((content) => {
                     if (!content?.properties) {
                         console.error("Invalid content data", content);
                         return;
                     }

                     const dialog = new FormDialog({ title: content.name || "Edit Block" });
                     const form = new FormContainer();
                     const inlinePublish = new InlinePublish();
                     let isDirty = false;

                     form.placeAt(dialog.containerNode || dialog.content);
                     const hasPublishAccess = ContentActionSupport.hasAccess(
                         content.accessMask,
                         ContentActionSupport.accessLevel.Publish
                     );

                     form.set("contentLink", contentLink).then(() => {
                         form.startup();
                         inlinePublish.set("model", { contentLink, content });

                         dialog.show();
                         dialog.setPublishLabel(inlinePublish.label || "Publish");

                         on(form, "change", () => {
                             isDirty = true;
                             dialog.togglePublishButton(hasPublishAccess);
                         });
                         function canPublish() {
                             return inlinePublish.get("isAvailable") && inlinePublish.get("canExecute");
                         }
                         on(dialog, "execute", () => form.saveForm());
                         on(dialog, "Publish", function () {
                             var deferred = true;
                             if (isDirty) {
                                 deferred = form.saveForm();
                             }
                             when(deferred).then(function () {
                                 var prePublishDeferred = true;
                                 if (!canPublish()) {
                                     prePublishDeferred = inlinePublish._onModelChange();
                                 }
                                 when(prePublishDeferred).then(function () {
                                     if (canPublish()) {
                                         inlinePublish.execute().then(function () {
                                             dialog.hide();
                                         });
                                     } else {
                                         dialog.hide();
                                     }
                                 });
                             });
                         });

                         on(dialog, "hide", () => {
                             form.destroy();
                             inlinePublish.destroy();
                         });
                     });
                 });
             });
         },

         _onEditButtonClick() {
             const id = this.editButton.getAttribute("data-id");
             const contextParameters = {
                 uri: `epi.cms.contentdata:///${id}`,
                 context: this
             };

             topic.publish("/epi/shell/context/request", contextParameters, {
                 sender: this,
                 forceReload: true
             });
         },

         _updateDisplayNode(content) {
             this.inherited(arguments);

             if (content) {
                 this.thumbnail.src = this._getThumbnailUrl(content);
                 this.quickEditButton.setAttribute("data-id", content.contentLink);
                 this.editButton.setAttribute("data-id", content.contentLink);
                 domClass.toggle(this.displayNode, "dijitHidden", false);
             } else {
                 this.quickEditButton.style.display = "none";
                 this.editButton.style.display = "none";
                 this.quickEditButton.setAttribute("data-id", null);
                 this.editButton.setAttribute("data-id", null);
                 domClass.toggle(this.displayNode, "dijitHidden", true);
             }

             this.stateNode.title = content ? content.name : "";
         },

         postCreate() {
             this.inherited(arguments);
             this.query = { query: "getchildren", allLanguages: true };

             this.connect(this.quickEditButton, "onclick", this._onQuickEditButtonClick);
             this.connect(this.editButton, "onclick", this._onEditButtonClick);
             this.connect(this.clearButton, "onclick", () => {
                 this.quickEditButton.style.display = "none";
             });
         },

         _onButtonClick() {
             if (!this.readOnly) {
                 this.inherited(arguments);
             }
         }
     });
 });