{"id":13774031,"url":"https://github.com/eissasoubhi/summernote-gallery","last_synced_at":"2025-09-14T17:47:56.815Z","repository":{"id":5775955,"uuid":"52525325","full_name":"eissasoubhi/summernote-gallery","owner":"eissasoubhi","description":"summernote gallery module, provides a bootstrap modal image gallery to select images from a server.","archived":false,"fork":false,"pushed_at":"2024-03-16T11:36:35.000Z","size":4077,"stargazers_count":45,"open_issues_count":7,"forks_count":14,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-08-25T00:05:01.590Z","etag":null,"topics":["bootstrap-modal","bootstrap-template","image-dialog","image-gallery","summernote","summernote-extension","summernote-gallery","summernote-module","summernote-plugins"],"latest_commit_sha":null,"homepage":"http://eissasoubhi.github.io/summernote-gallery","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eissasoubhi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-02-25T13:13:13.000Z","updated_at":"2025-07-15T13:46:08.000Z","dependencies_parsed_at":"2024-01-13T11:52:25.251Z","dependency_job_id":"8b1f9c9f-9634-44d5-9653-72ab460ebeb8","html_url":"https://github.com/eissasoubhi/summernote-gallery","commit_stats":{"total_commits":67,"total_committers":4,"mean_commits":16.75,"dds":"0.20895522388059706","last_synced_commit":"1b032647b229a92db5829be2c3ad593e1f6aad53"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/eissasoubhi/summernote-gallery","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eissasoubhi%2Fsummernote-gallery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eissasoubhi%2Fsummernote-gallery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eissasoubhi%2Fsummernote-gallery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eissasoubhi%2Fsummernote-gallery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eissasoubhi","download_url":"https://codeload.github.com/eissasoubhi/summernote-gallery/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eissasoubhi%2Fsummernote-gallery/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275143585,"owners_count":25413091,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-14T02:00:10.474Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap-modal","bootstrap-template","image-dialog","image-gallery","summernote","summernote-extension","summernote-gallery","summernote-module","summernote-plugins"],"created_at":"2024-08-03T17:01:23.029Z","updated_at":"2025-09-14T17:47:56.781Z","avatar_url":"https://github.com/eissasoubhi.png","language":"TypeScript","funding_links":[],"categories":["Plugins"],"sub_categories":["Insert"],"readme":"\n\n# Summernote gallery\nsummernote-gallery extension/plugin/module for [summernote](https://github.com/summernote/summernote/) WYSIWYG, provides a bootstrap image-gallery modal to select images from the server and add them to the summernote editor with **the real path to the server** instead of using base64 encoding.\n\n**For a complete module with more user-friendly components. see [Summernote bricks](https://github.com/eissasoubhi/summernote-bricks)**\n\n# Demo\n\nDemo link:\nhttp://eissasoubhi.github.io/summernote-gallery \u003cbr\u003e\u003cbr\u003e\n\n![Summernote gallery demo](demo.gif?raw=true \"Summernote gallery demo\")\n\n# Installing\n- Include the required files, and the module file after summernote.min.js file\n\n```html\n\u003clink href=\"https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css\" rel=\"stylesheet\" \u003e\n\u003clink href=\"https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css\" rel=\"stylesheet\"\u003e\n\u003clink href=\"https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css\" rel=\"stylesheet\"\u003e\n\n\u003cdiv id=\"summernote\"\u003e\u003c/div\u003e\n\n\u003cscript src=\"https://code.jquery.com/jquery-3.5.1.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js\"\u003e\u003c/script\u003e\n\u003c!-- summernote-gallery --\u003e\n\u003cscript src=\"dist/summernote-gallery.min.js\" type=\"text/javascript\"\u003e\u003c/script\u003e\n```\n- Add the gallery to the summernote editor toolbar\n\n```javascript\n$('#summernote').summernote({\n toolbar: [\n // ['insert', ['picture', 'link', 'video', 'table', 'hr', 'summernoteGallery']],\n // ['font style', ['fontname', 'fontsize', 'color', 'bold', 'italic', \n //'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],\n // ['paragraph style', ['style', 'ol', 'ul', 'paragraph', 'height']],\n // ['misc', ['fullscreen', 'codeview', 'undo', 'redo', 'help']]\n ['extensions', ['summernoteGallery']],\n ],\n summernoteGallery: {\n source: {\n // data: [],\n url: 'http://eissasoubhi.github.io/summernote-gallery/server/example.json',\n responseDataKey: 'data',\n nextPageKey: 'links.next',\n },\n modal: {\n loadOnScroll: true,\n maxHeight: 300,\n title: \"La galerie d'images\",\n close_text: 'Fermer',\n ok_text: 'Ajouter',\n selectAll_text: 'Sélectionner Tout',\n deselectAll_text: 'Désélectionner Tout',\n buttonLabel: '\u003ci class=\"fa fa-file-image-o\"\u003e\u003c/i\u003e Gallery'\n }\n }\n });\n```\n\nI used a json file `server/example.json` as the `source.url` just for the demo, for a practical example you can check out the PHP file `server/example.php`.\n\n# Options\n\nThe module has two main options: `source` and `modal`:\u003cbr\u003e\nThe `source` option has sub-options that handle data and ajax requests.\u003cbr\u003e\nThe `modal` option has sub-options that deal with the bootsrap modal.\u003cbr\u003e\n\n\n## Sub-options:\n\n| Option | description | default | type | example |\n|----------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------|----------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| source | This option is the parent of the following options: | | object | |\n| source.data | Array of objects with 'src' and 'title' properties | [] | array | [{\u003cbr\u003e \"id\": \"1\",\u003cbr\u003e \"url\": \"https://picsum.photos/id/40/200/200\",\u003cbr\u003e \"title\": \"a galerie test\"\u003cbr\u003e}, {\u003cbr\u003e \"id\": \"2\",\u003cbr\u003e \"url\": \"https://picsum.photos/id/50/200/200\",\u003cbr\u003e \"title\": \"a galerie test\"\u003cbr\u003e}] |\n| source.url | A full valid URL. the response of the URL must have `data` property that holds the data.\u003cbr\u003e The data format is the same as the `source.data`'s. the `data` property name can be changed with the `source.responseDataKey` option.\u003cbr\u003e If `modal.loadOnScroll` is set to true, in addition to `data`, the response is expected to have `links.next` property for the next page URL, this property name can also be changed with the `source.nextPageKey` option. | null | string | URL example: http://mywebsite.com/api/images?page=1 \u003cbr\u003e Response example:\u003cbr\u003e \u003cbr\u003e{\u003cbr\u003e \"data\": [{\u003cbr\u003e \"id\": \"1\",\u003cbr\u003e \"url\": \"https://picsum.photos/id/40/200/200\",\u003cbr\u003e \"title\": \"a galerie test\"\u003cbr\u003e }, {\u003cbr\u003e \"id\": \"2\",\u003cbr\u003e \"url\": \"https://picsum.photos/id/50/200/200\",\u003cbr\u003e \"title\": \"a galerie test\"\u003cbr\u003e }],\u003cbr\u003e \"links\": {\u003cbr\u003e \"next\": \"http://mywebsite.com/api/images?page=2\"\u003cbr\u003e }\u003cbr\u003e} |\n| source.responseDataKey | The property name that holds the data array from `source.url`.\u003cbr\u003e For sub-properties, use dot notation, eg: `\"data.key.subkey\"` | data | string | If the `source.responseDataKey` option value is `\"data.items\"`,\u003cbr\u003e The `source.url` response is expected to be: \u003cbr\u003e{\u003cbr\u003e \"data\": {\u003cbr\u003e \"items\": [{\u003cbr\u003e \"id\": \"1\",\u003cbr\u003e \"url\": \"https://picsum.photos/id/40/200/200\",\u003cbr\u003e \"title\": \"a galerie test\"\u003cbr\u003e }, {\u003cbr\u003e \"id\": \"2\",\u003cbr\u003e \"url\": \"https://picsum.photos/id/50/200/200\",\u003cbr\u003e \"title\": \"a galerie test\"\u003cbr\u003e }]\u003cbr\u003e },\u003cbr\u003e \"links\": {\u003cbr\u003e \"next\": \"....\"\u003cbr\u003e }\u003cbr\u003e} |\n| source.nextPageKey | The property name that holds the next page link from `source.url`.\u003cbr\u003e For sub-properties, use dot notation, eg: `\"data.key.subkey\"` | links.next | string | If the `source.nextPageKey` option value is `\"next_page\"`,\u003cbr\u003e the `source.url` response is expected to be: \u003cbr\u003e{\u003cbr\u003e \"data\": [],\u003cbr\u003e \"next_page\": \"http://mywebsite.com/api/images?page=2\"\u003cbr\u003e} |\n| source.formater | A callback function to format the data array (data from source.data) before handling it by the module, it must return an array of objects of type `{id: \"11\", url: '', title: ''}` | (data, page, response) =\u003e {\u003cbr\u003e return data\u003cbr\u003e} | function | (data, page, response) =\u003e {\u003cbr\u003e return data.map(image =\u003e {\u003cbr\u003e return {\u003cbr\u003e id: image.id\u003cbr\u003e url: image.src+'?v=' + Date.now(),\u003cbr\u003e title: image.title\u003cbr\u003e }\u003cbr\u003e })\u003cbr\u003e} |\n| modal | This option is the parent of the following options: | | object | |\n| modal.loadOnScroll | Reloads the next page data when the modal scroll is near to the bottom.\u003cbr\u003e The module reloads the next page data using `source.nextPageKey` value to extract the next page link from the last `source.url` response, that means when `modal.loadOnScroll` is set to true, every request must provide the link to the next page, unless it's the last page, in that case, the value of the next page link has to be null or unset. | false | boolean | true |\n| modal.height | The modal body height | 500 | integer | 300 |\n| modal.title | The modal title | summernote image gallery | string | |\n| modal.closeText | The modal close button text | Close | string | Fermer |\n| modal.saveText | The modal save button text | Add | string | Ajouter |\n| modal.selectAllText | The modal select-all button text | Select all | string | Sélectionner Tout |\n| modal.deselectAllText | The modal deselect-all button text | Deselect all | string | Désélectionner Tout |\n| modal.messageContainerClass | the html element class containing the modal messages | snb-modal-message | string | |\n| modal.selectClassName | the class added to the selected image on the modal | selected-img | string | |\n| modal.validations | validation rules applied to each snb-brick data property before modal save action | {\u003cbr\u003e selectedImages: {\u003cbr\u003e required: {\u003cbr\u003e message: 'At least one image must be selected!'\u003cbr\u003e }\u003cbr\u003e }\u003cbr\u003e} | object | |\n| modal.validations.selectedImages | the selected images from the modal | {\u003cbr\u003e required: {\u003cbr\u003e message: 'At least one image must be selected!'\u003cbr\u003e }\u003cbr\u003e} | object | |\n| buttonLabel | The text displayed on the plugin button, it accepts HTML | SN Gallery | string | My Button |\n\nFeel free to modify the source file to suit your needs.\n\n# Contribution || Edit\n\n**Requirements: node v16**\n\nTo run the plugin on local, head to the project root folder and run:\n1. `npm install`\n2. `npm run start` to start the project on 127.0.0.1:9090\n3. `npm run dev` to start the webpack watch mode\n4. Edit plugin files in the `/src` folder \n5. `npm run build` to generate the build in `/dist` folder\n\nIf you found any bugs or have suggestions, dont hesitate to throw it in the issues sections.\n\nFor more undestanding of how this module works take a look on the [v1](https://github.com/eissasoubhi/summernote-gallery/tree/v1) branch or the summernote extension basic sample [hello](https://github.com/summernote/summernote/blob/v0.7.0/examples/plugin-hello.html) .\n\n# License\nThe contents of this repository is licensed under [The MIT License.](https://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feissasoubhi%2Fsummernote-gallery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feissasoubhi%2Fsummernote-gallery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feissasoubhi%2Fsummernote-gallery/lists"}