{"id":13562683,"url":"https://github.com/editor-js/image","last_synced_at":"2026-01-14T03:19:18.389Z","repository":{"id":37458332,"uuid":"153910222","full_name":"editor-js/image","owner":"editor-js","description":"Image Block for Editor.js","archived":false,"fork":false,"pushed_at":"2025-07-01T15:45:53.000Z","size":1510,"stargazers_count":275,"open_issues_count":128,"forks_count":302,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-11-23T04:10:17.732Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/editor-js.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","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},"funding":{"github":"neSpecc","open_collective":"editorjs"}},"created_at":"2018-10-20T13:48:44.000Z","updated_at":"2025-11-22T14:27:13.000Z","dependencies_parsed_at":"2023-02-17T06:46:08.531Z","dependency_job_id":"75dd97df-5efd-41ac-9079-a06edd86c7dd","html_url":"https://github.com/editor-js/image","commit_stats":{"total_commits":171,"total_committers":29,"mean_commits":5.896551724137931,"dds":0.7894736842105263,"last_synced_commit":"c8236e5765294f6b6590573910a68d3826671838"},"previous_names":["codex-editor/image"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/editor-js/image","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/editor-js%2Fimage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/editor-js%2Fimage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/editor-js%2Fimage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/editor-js%2Fimage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/editor-js","download_url":"https://codeload.github.com/editor-js/image/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/editor-js%2Fimage/sbom","scorecard":{"id":298005,"data":{"date":"2025-08-11","repo":{"name":"github.com/editor-js/image","commit":"d7f0afb5f2e0110dc716941268e6689857a58830"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":4,"checks":[{"name":"Maintained","score":2,"reason":"3 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 2","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":10,"reason":"all changesets reviewed","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/eslint.yml:1","Warn: no topLevel permission defined: .github/workflows/npm-publish.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/eslint.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/editor-js/image/eslint.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/eslint.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/editor-js/image/eslint.yml/master?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/npm-publish.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/editor-js/image/npm-publish.yml/master?enable=pin","Info:   0 out of   2 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   1 third-party GitHubAction dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 30 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"19 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-75v8-2h7p-7m2m","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-64vr-g452-qvp3","Warn: Project is vulnerable to: GHSA-9cwx-2883-4wfx","Warn: Project is vulnerable to: GHSA-vg6x-rcgg-rjx6","Warn: Project is vulnerable to: GHSA-x574-m823-4x7w","Warn: Project is vulnerable to: GHSA-4r4m-qw57-chr8","Warn: Project is vulnerable to: GHSA-xcj6-pq6g-qj4x","Warn: Project is vulnerable to: GHSA-356w-63v5-8wf4","Warn: Project is vulnerable to: GHSA-859w-5945-r5v3","Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-17T19:59:58.640Z","repository_id":37458332,"created_at":"2025-08-17T19:59:58.641Z","updated_at":"2025-08-17T19:59:58.641Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28408824,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-14T01:52:23.358Z","status":"online","status_checked_at":"2026-01-14T02:00:06.678Z","response_time":107,"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":[],"created_at":"2024-08-01T13:01:11.146Z","updated_at":"2026-01-14T03:19:18.365Z","avatar_url":"https://github.com/editor-js.png","language":"TypeScript","funding_links":["https://github.com/sponsors/neSpecc","https://opencollective.com/editorjs"],"categories":["JavaScript","Tools","TypeScript"],"sub_categories":["Block Tools"],"readme":"![](https://badgen.net/badge/Editor.js/v2.0/blue)\n\n# Image Tool\n\nImage Block for the [Editor.js](https://editorjs.io).\n\n![](https://capella.pics/63a03d04-3816-45b2-87b2-d85e556f0066.jpg)\n\n## Features\n\n- Uploading file from the device\n- Pasting copied content from the web\n- Pasting images by drag-n-drop\n- Pasting files and screenshots from Clipboard\n- Allows adding a border, a background and a caption\n- Allows stretching an image to the container's full-width\n\n**Notes**\n\nThis Tool requires server-side implementation for the file uploading. See [backend response format](#server-format) for more details.\n\nThis Tool is also capable of uploading \u0026 displaying video files using the `\u003cvideo\u003e` element. To enable this, specify video mime-types via the 'types' config param.\n\n\n## Installation\n\nGet the package\n\n```shell\nyarn add @editorjs/image\n```\n\nInclude module at your application\n\n```javascript\nimport ImageTool from '@editorjs/image';\n```\n\nOptionally, you can load this tool from [JsDelivr CDN](https://cdn.jsdelivr.net/npm/@editorjs/image@latest)\n\n## Usage\n\nAdd a new Tool to the `tools` property of the Editor.js initial config.\n\n```javascript\nimport ImageTool from '@editorjs/image';\n\n// or if you inject ImageTool via standalone script\nconst ImageTool = window.ImageTool;\n\nvar editor = EditorJS({\n  ...\n\n  tools: {\n    ...\n    image: {\n      class: ImageTool,\n      config: {\n        endpoints: {\n          byFile: 'http://localhost:8008/uploadFile', // Your backend file uploader endpoint\n          byUrl: 'http://localhost:8008/fetchUrl', // Your endpoint that provides uploading by Url\n        }\n      }\n    }\n  }\n\n  ...\n});\n```\n\n## Config Params\n\nImage Tool supports these configuration parameters:\n\n| Field | Type     | Description        |\n| ----- | -------- | ------------------ |\n| endpoints | `{byFile: string, byUrl: string}` | Endpoints for file uploading. \u003cbr\u003e Contains 2 fields: \u003cbr\u003e __byFile__ - for file uploading \u003cbr\u003e __byUrl__ - for uploading by URL |\n| field | `string` | (default: `image`) Name of uploaded image field in POST request |\n| types | `string` | (default: `image/*`) Mime-types of files that can be [accepted with file selection](https://github.com/codex-team/ajax#accept-string).|\n| additionalRequestData | `object` | Object with any data you want to send with uploading requests |\n| additionalRequestHeaders | `object` | Object with any custom headers which will be added to request. [See example](https://github.com/codex-team/ajax/blob/e5bc2a2391a18574c88b7ecd6508c29974c3e27f/README.md#headers-object) |\n| captionPlaceholder | `string` | (default: `Caption`) Placeholder for Caption input |\n| buttonContent | `string` | Allows to override HTML content of «Select file» button |\n| uploader | `{{uploadByFile: function, uploadByUrl: function}}` | Optional custom uploading methods. See details below. |\n| actions | `array` | Array with custom actions to show in the tool's settings menu. See details below. |\n| features | `object` | Allows you to enable/disable additional features such as border, background tunes and caption. See details below. |\n\nNote that if you don't implement your custom uploader methods, the `endpoints` param is required.\n\n## Tool's settings\n\n![](https://capella.pics/c74cdeec-3405-48ac-a960-f784188cf9b4.jpg)\n\n1. Add border\n\n2. Stretch to full-width\n\n3. Add background\n\n4. Add caption\n\nAdd extra setting-buttons by adding them to the `actions`-array in the configuration:\n```js\nactions: [\n    {\n        name: 'new_button',\n        icon: '\u003csvg\u003e...\u003c/svg\u003e',\n        title: 'New Button',\n        toggle: true,\n        action: (name) =\u003e {\n            alert(`${name} button clicked`);\n        }\n    }\n]\n```\n\n**_NOTE:_**  return value of `action` callback for settings whether action button should be toggled or not is *deprecated*. Consider using `toggle` option instead.\n\nYou can disable features such as border, background tunes and caption by defining `features` in the configuration:\n```js\nfeatures: {\n  border: false,\n  caption: 'optional',\n  stretch: false\n}\n```\n\n**_NOTE:_** set caption to `optional` in order to configure caption as a tune.\n\n## Output data\n\nThis Tool returns `data` with following format\n\n| Field          | Type      | Description                     |\n| -------------- | --------- | ------------------------------- |\n| file           | `object`  | Uploaded file data. Any data got from backend uploader. Always contain the `url` property |\n| caption        | `string`  | image's caption                 |\n| withBorder     | `boolean` | add border to image             |\n| withBackground | `boolean` | need to add background          |\n| stretched      | `boolean` | stretch image to screen's width |\n\n\n```json\n{\n    \"type\" : \"image\",\n    \"data\" : {\n        \"file\": {\n            \"url\" : \"https://www.tesla.com/tesla_theme/assets/img/_vehicle_redesign/roadster_and_semi/roadster/hero.jpg\"\n        },\n        \"caption\" : \"Roadster // tesla.com\",\n        \"withBorder\" : false,\n        \"withBackground\" : false,\n        \"stretched\" : true,\n    }\n}\n```\n\n## Backend response format \u003ca name=\"server-format\"\u003e\u003c/a\u003e\n\nThis Tool works by one of the following schemes:\n\n1. Uploading files from the device\n2. Uploading by URL (handle image-like URL's pasting)\n3. Uploading by drag-n-drop file\n4. Uploading by pasting from Clipboard\n\n### Uploading files from device \u003ca name=\"from-device\"\u003e\u003c/a\u003e\n\nScenario:\n\n1. User select file from the device\n2. Tool sends it to **your** backend (on `config.endpoints.byFile` route)\n3. Your backend should save file and return file data with JSON at specified format.\n4. Image tool shows saved image and stores server answer\n\nSo, you can implement backend for file saving by your own way. It is a specific and trivial task depending on your\nenvironment and stack.\n\nThe tool executes the request as [`multipart/form-data`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST), with the key as the value of `field`  in configuration.\n\nThe response of your uploader **should**  cover the following format:\n\n```json5\n{\n    \"success\" : 1,\n    \"file\": {\n        \"url\" : \"https://www.tesla.com/tesla_theme/assets/img/_vehicle_redesign/roadster_and_semi/roadster/hero.jpg\",\n        // ... and any additional fields you want to store, such as width, height, color, extension, etc\n    }\n}\n```\n\n**success** - uploading status. 1 for successful, 0 for failed\n\n**file** - uploaded file data. **Must** contain an `url` field with full public path to the uploaded image.\nAlso, can contain any additional fields you want to store. For example, width, height, id etc.\nAll additional fields will be saved at the `file` object of output data.\n\n### Uploading by pasted URL\n\nScenario:\n\n1. User pastes an URL of the image file to the Editor\n2. Editor pass pasted string to the Image Tool\n3. Tool sends it to **your** backend (on `config.endpoints.byUrl` route) via 'url' in request body\n4. Your backend should accept URL, **download and save the original file by passed URL** and return file data with JSON at specified format.\n5. Image tool shows saved image and stores server answer\n\nThe tool executes the request as `application/json` with the following request body:\n\n```json5\n{\n  \"url\": \"\u003cpasted URL from the user\u003e\"\n  \"additionalRequestData\": \"\u003cadditional request data from configuration\u003e\"\n}\n```\n\nResponse of your uploader should be at the same format as described at «[Uploading files from device](#from-device)» section\n\n\n### Uploading by drag-n-drop or from Clipboard\n\nYour backend will accept file as FormData object in field name, specified by `config.field` (by default, «`image`»).\nYou should save it and return the same response format as described above.\n\n## Providing custom uploading methods\n\nAs mentioned at the Config Params section, you have an ability to provide own custom uploading methods.\nIt is a quite simple: implement `uploadByFile` and `uploadByUrl` methods and pass them via `uploader` config param.\nBoth methods must return a Promise that resolves with response in a format that described at the [backend response format](#server-format) section.\n\n\n| Method         | Arguments | Return value | Description |\n| -------------- | --------- | -------------| ------------|\n| uploadByFile   | `File`    | `{Promise.\u003c{success, file: {url}}\u003e}` | Upload file to the server and return an uploaded image data |\n| uploadByUrl    | `string`  | `{Promise.\u003c{success, file: {url}}\u003e}` | Send URL-string to the server, that should load image by this URL and return an uploaded image data |\n\nExample:\n\n```js\nimport ImageTool from '@editorjs/image';\n\nvar editor = EditorJS({\n  ...\n\n  tools: {\n    ...\n    image: {\n      class: ImageTool,\n      config: {\n        /**\n         * Custom uploader\n         */\n        uploader: {\n          /**\n           * Upload file to the server and return an uploaded image data\n           * @param {File} file - file selected from the device or pasted by drag-n-drop\n           * @return {Promise.\u003c{success, file: {url}}\u003e}\n           */\n          uploadByFile(file){\n            // your own uploading logic here\n            return MyAjax.upload(file).then(() =\u003e {\n              return {\n                success: 1,\n                file: {\n                  url: 'https://codex.so/upload/redactor_images/o_80beea670e49f04931ce9e3b2122ac70.jpg',\n                  // any other image data you want to store, such as width, height, color, extension, etc\n                }\n              };\n            });\n          },\n\n          /**\n           * Send URL-string to the server. Backend should load image by this URL and return an uploaded image data\n           * @param {string} url - pasted image URL\n           * @return {Promise.\u003c{success, file: {url}}\u003e}\n           */\n          uploadByUrl(url){\n            // your ajax request for uploading\n            return MyAjax.upload(file).then(() =\u003e {\n              return {\n                success: 1,\n                file: {\n                  url: 'https://codex.so/upload/redactor_images/o_e48549d1855c7fc1807308dd14990126.jpg',,\n                  // any other image data you want to store, such as width, height, color, extension, etc\n                }\n              }\n            })\n          }\n        }\n      }\n    }\n  }\n\n  ...\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feditor-js%2Fimage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feditor-js%2Fimage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feditor-js%2Fimage/lists"}