{"id":13770522,"url":"https://github.com/WebJeffery/editor-js-component","last_synced_at":"2025-05-11T03:32:47.541Z","repository":{"id":206809468,"uuid":"717657033","full_name":"WebJeffery/editor-js-component","owner":"WebJeffery","description":"editor.js for Vue and React library","archived":false,"fork":false,"pushed_at":"2023-12-23T16:52:53.000Z","size":2463,"stargazers_count":10,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-05-19T14:35:09.135Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://webjeffery.github.io/editor-js-component/","language":"JavaScript","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/WebJeffery.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}},"created_at":"2023-11-12T06:12:33.000Z","updated_at":"2024-05-17T16:08:27.000Z","dependencies_parsed_at":"2023-11-12T14:38:17.131Z","dependency_job_id":"07a2f9a1-7705-42f7-bd5a-122ae7cf4936","html_url":"https://github.com/WebJeffery/editor-js-component","commit_stats":null,"previous_names":["jefferyxzf/vue3-editor-js","webjeffery/vue3-editor-js","webjeffery/editor-js-component"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebJeffery%2Feditor-js-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebJeffery%2Feditor-js-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebJeffery%2Feditor-js-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebJeffery%2Feditor-js-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WebJeffery","download_url":"https://codeload.github.com/WebJeffery/editor-js-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253514352,"owners_count":21920327,"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","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-03T17:00:38.714Z","updated_at":"2025-05-11T03:32:46.464Z","avatar_url":"https://github.com/WebJeffery.png","language":"JavaScript","funding_links":[],"categories":["Libraries"],"sub_categories":["JavaScript"],"readme":"# Editorjs Component\n\neditor-js-component is an editorjs wrapper component that can use Vue and React frameworks\n\n\nPlease review this first. [https://editorjs.io/](https://editorjs.io/)\n\n\n[Demo](https://vue-p4wjes.stackblitz.io)\n\n## editor-js-component\n\n### Installation\n\n```shell\n# NPM\nnpm install --save editor-js-component\n\n# or Yarn\nyarn add editor-js-component\n\n# or Pnpm\npnpm add editor-js-component\n```\n\n### Usage\n\n```js\nimport { useEditorjs } from 'editor-js-component'\n\nconst editorInstance = useEditorjs({\n  holder, \n  readonly,\n  autofocus,\n  blockToolbar,\n  customPlugin,\n  pluginConfig,\n  editorConfig,\n  disablePlugin,\n  data,\n  messages,\n  editorjs: null,\n  onStart: ({ data }) =\u003e {\n    \n  },\n  onReady: ({ data }) =\u003e {\n    \n  },\n  onChange: ({ data }) =\u003e {\n    \n  },\n  onDestroy: ({ data }) =\u003e {\n    \n  },\n})\n```\n\n### API\n\n**Attribute**\n\nName | Description | Default |\n| --- | --- | --- |\n|  holder   |   Mount node  |  editor-js-component   |\n|  readonly   |  Read only page   |   false  |\n|  autofocus   |  Autofocus editor   |  true   |\n|  blockToolbar   |  The block tool opens and sorts   |   Array  |\n|  customPlugin   |   Add new plug-in  |   Object  |\n|  pluginConfig   |  Plug-in configuration   |   Object  |\n|  editorConfig   |  Editor configuration   |   Object  |\n|  disablePlugin   | List of disabled plug-ins    |   Array，suach as[ 'header', 'list']  |\n|  data   |   Render data  |  Object   |\n|  messages   |  International translation   |   Object  |\n\n\n**Mehtods**\n\nName | Description | Default |\n| --- | --- | --- |\n|  onStart   |   -  |  Function   |\n|  onReady   |   -  |  Function   |\n|  onChange   |   -  |  Function   |\n|  onDestroy   |   -  |  Function   |\n\n## editorjs-component-vue\n\neditorjs vue packages components\n\n```js\nimport { EditorJsVue, EditorJsParser } from 'editorjs-component-vue'\n\n```\n\n\n```html\n\u003cdiv class=\"editor-wrap\"\u003e\n  \u003cEditorJsVue\n    class=\"editor-left\"\n    ref=\"editor\"\n    :data=\"data\"\n    :messages=\"i18nMessage\"\n    :initialized=\"onInitialized\"\n    :tool-config=\"toolConfig\"\n    @changeData=\"editorChange\"\n  /\u003e\n  \u003cdiv class=\"editor-right\"\u003e\n    \u003cEditorJsParser :block-list=\"blockList\"\u003e\u003c/EditorJsParser\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n```js\nconst blockList = ref([])\n\nconst toolConfig = ref({\n  image: {\n    config: {\n      customUpload: {\n        uploadByCallback({ uploadSuccess }) {\n          uploadSuccess({ url: 'https://editorjs.io/_nuxt/api-image_2x.aa04c3de.jpg' })\n        }\n      },\n      uploader: {\n        uploadByFile(file) {\n          return uploadImage(file)\n        }\n      },\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  link: {\n    config: {\n      getSelection(selection) {\n        rangeSelection = selection\n      },\n      searchLinkData(search) {\n        const list = [\n          { name: 'xx1', href: 'https://xxx.com', description: '' }\n          { name: 'xx2', href: 'https://xxx.com', description: '' }\n          { name: 'xx3', href: 'https://xxx.com', description: '' }\n        ]\n        const result = list.filter((item) =\u003e item.name.includes(search))\n        return Promise.resolve({\n          items: result,\n          success: true\n        })\n      }\n    }\n  }\n})\n\nconst onInitialized = (editor) =\u003e {\n  editorInstance.value = editor\n}\n\nconst editorChange = ({ json }) =\u003e {\n  blockList.value = json.blocks\n}\n```\n\n## Supported Plugins\n\n- header\n- list\n- code\n- inlineCode\n- personality\n- embed\n- linkTool\n- marker\n- table\n- raw\n- delimiter\n- quote\n- image\n- warning\n- paragraph\n- checklist\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWebJeffery%2Feditor-js-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FWebJeffery%2Feditor-js-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWebJeffery%2Feditor-js-component/lists"}