Add: options.imageGalleryData #1446

JiHong88 · Jan 8, 2025 · bfe5405 · bfe5405
1 parent 0ba60f3
commit bfe5405
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -692,6 +692,16 @@ imageMultipleFile: If true, multiple images can be selected.    default: false {
 imageAccept      : Define the "accept" attribute of the input.  default: "*" {String}
                    ex) "*" or ".jpg, .png .."
 // Image - image gallery
+imageGalleryJSONData    : Direct JSON data without making server requests.  default: null {Array}
+                          ex) [
+                                {
+                                    "src": "/download/editorImg/test_image.jpg", // @Require
+                                    "thumbnail": "/download/editorImg/test_thumbnail.jpg", // @Option - Thumbnail image to be displayed in the image gallery.
+                                    "name": "Test image", // @Option - default: src.split('/').pop()
+                                    "alt": "Alt text", // @Option - default: src.split('/').pop()
+                                    "tag": "Tag name" // @Option
+                                }
+                            ]
 imageGalleryUrl     : The url of the image gallery, if you use the image gallery.
                       When "imageUrlInput" is true, an image gallery button is created in the image modal.
                       You can also use it by adding "imageGallery" to the button list.   default: null {String}

diff --git a/src/lib/constructor.js b/src/lib/constructor.js
@@ -542,6 +542,7 @@ export default {
         options.imageMultipleFile = !!options.imageMultipleFile;
         options.imageAccept = (typeof options.imageAccept !== 'string' || options.imageAccept.trim() === "*") ? 'image/*' : options.imageAccept.trim() || 'image/*';
         /** Image - image gallery */
+        options.imageGalleryData = options.imageGalleryData || null;
         options.imageGalleryUrl = typeof options.imageGalleryUrl === 'string' ? options.imageGalleryUrl : null;
         options.imageGalleryHeader = options.imageGalleryHeader || null;
         /** Video */

diff --git a/src/options.d.ts b/src/options.d.ts
@@ -359,6 +359,10 @@ export interface SunEditorOptions {
      * Image - image gallery
      * =====
      */
+    /**
+     * Direct JSON data without making server requests.
+     */
+    imageGalleryData?: Array;
     /**
      * The url of the image gallery, if you use the image gallery
      */

diff --git a/src/plugins/fileBrowser/imageGallery.js b/src/plugins/fileBrowser/imageGallery.js
@@ -21,7 +21,8 @@ export default {
         const context = core.context;
         context.imageGallery = {
             title: core.lang.toolbar.imageGallery, // @Required @Override fileBrowser - File browser window title.
-            url: core.options.imageGalleryUrl, // @Required @Override fileBrowser - File server url.
+            directData: core.options.imageGalleryData, // @option @Override fileBrowser - Direct JSON data without making server requests.
+            url: core.options.imageGalleryUrl, // @option @Override fileBrowser - File server url.
             header: core.options.imageGalleryHeader, // @Required @Override fileBrowser - File server http header.
             listClass: 'se-image-list', // @Required @Override fileBrowser - Class name of list div.
             itemTemplateHandler: this.drawItems, // @Required @Override fileBrowser - Function that defines the HTML of an file item.

diff --git a/src/plugins/modules/fileBrowser.js b/src/plugins/modules/fileBrowser.js
@@ -162,7 +162,11 @@
             fileBrowserContext.titleArea.textContent = pluginContext.title;
             fileBrowserContext.area.style.display = 'block';
 
-            this.plugins.fileBrowser._drawFileList.call(this, this.context[pluginName].url, this.context[pluginName].header);
+            if (this.context[pluginName].directData) {
+                this.plugins.fileBrowser._drawListItem.call(this, this.context[pluginName].directData, true);
+            } else {
+                this.plugins.fileBrowser._drawFileList.call(this, this.context[pluginName].url, this.context[pluginName].header);
+            }
         },
 
         _bindClose: null,

diff --git a/test/dev/suneditor_build_test.js b/test/dev/suneditor_build_test.js
@@ -1031,6 +1031,26 @@ let s2 = window.s2 = suneditor.create(document.getElementById('editor2'), {
     videoFileInput: true,
     // font: ['\'Exo 2\'', 'Sans-serif', 'Exo 2'],
     imageGalleryUrl: 'https://etyswjpn79.execute-api.ap-northeast-1.amazonaws.com/suneditor-demo',
+    imageGalleryData: [
+        {
+          "src": "http://suneditor.com/docs/cat.jpg",
+          "name": "Tabby",
+          "alt": "Tabby",
+          "tag": "Cat"
+        },
+        {
+          "src": "http://suneditor.com/docs/cat1.jpg",
+          "name": "Cat paw",
+          "alt": "Cat paw",
+          "tag": "Cat"
+        },
+        {
+          "src": "http://suneditor.com/docs/cat2.jpg",
+          "name": "Cat",
+          "alt": "Cat",
+          "tag": "Cat"
+        }
+    ],
     videoTagAttrs: {
         autoplay: true,
         muted: true,