{"id":13514768,"url":"https://github.com/ChangJoo-Park/vue-editor-js","last_synced_at":"2025-03-31T03:31:18.767Z","repository":{"id":34458256,"uuid":"179216347","full_name":"ChangJoo-Park/vue-editor-js","owner":"ChangJoo-Park","description":"editor.js for Vue users","archived":false,"fork":false,"pushed_at":"2023-03-06T17:28:06.000Z","size":2829,"stargazers_count":365,"open_issues_count":47,"forks_count":76,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-28T17:24:28.497Z","etag":null,"topics":["editor","editorjs","plugin","vue","vue-composition-api","vue-editor-js","vue3","wysiwyg-editor","wysiwyg-js-editor"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/embed/o7lyqwmvmq","language":"JavaScript","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/ChangJoo-Park.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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},"funding":{"github":["changjoo-park"],"ko_fi":"A316F4N"}},"created_at":"2019-04-03T05:25:31.000Z","updated_at":"2025-03-12T19:04:12.000Z","dependencies_parsed_at":"2024-01-02T23:34:31.315Z","dependency_job_id":"4c0e5dad-e0f5-472e-b5d8-f6c3ff7c571f","html_url":"https://github.com/ChangJoo-Park/vue-editor-js","commit_stats":{"total_commits":118,"total_committers":12,"mean_commits":9.833333333333334,"dds":"0.34745762711864403","last_synced_commit":"bc817a162cb383b87ab09b464fa6e544dc7d11fe"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChangJoo-Park%2Fvue-editor-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChangJoo-Park%2Fvue-editor-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChangJoo-Park%2Fvue-editor-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChangJoo-Park%2Fvue-editor-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ChangJoo-Park","download_url":"https://codeload.github.com/ChangJoo-Park/vue-editor-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246413377,"owners_count":20773053,"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":["editor","editorjs","plugin","vue","vue-composition-api","vue-editor-js","vue3","wysiwyg-editor","wysiwyg-js-editor"],"created_at":"2024-08-01T05:01:01.542Z","updated_at":"2025-03-31T03:31:15.243Z","avatar_url":"https://github.com/ChangJoo-Park.png","language":"JavaScript","funding_links":["https://github.com/sponsors/changjoo-park","https://ko-fi.com/A316F4N"],"categories":["Rich text editor","UI Components [🔝](#readme)","Libraries","编辑器相关","JavaScript","Components \u0026 Libraries"],"sub_categories":["JavaScript","UI Components"],"readme":"# vue-editor-js\n\n[![Wallaby.js](https://img.shields.io/badge/wallaby.js-powered-blue.svg?style=for-the-badge\u0026logo=github)](https://wallabyjs.com/oss/)\n\n\nvue-editor-js is editorjs wrapper component.\n\nPlease review this first. https://editorjs.io/\n\n## For before 2.0.0 version users.\n\nThis plugins is a wrapper component for editorjs.\nIf you need to use the plugin for editor.js then import it and set the config property.\n\nPlease See the [Demo.vue](https://github.com/ChangJoo-Park/vue-editor-js/blob/master/demo/Demo.vue)\n\n\n## For before 1.0.0 version users.\n\nPlease use `Vue.use` vue-editor-js in main.js.\n\n## Supported Plugins\n\n- [Personality](https://github.com/editor-js/personality)\n- [Header](https://github.com/editor-js/header)\n- [List](https://github.com/editor-js/list)\n- [Image](https://github.com/editor-js/image)\n- [InlineCode](https://github.com/editor-js/inline-code)\n- [Embed](https://github.com/editor-js/embed)\n- [Quote](https://github.com/editor-js/quote)\n- [Marker](https://github.com/editor-js/marker)\n- [Code](https://github.com/editor-js/code)\n- [Link](https://github.com/editor-js/link)\n- [Delimiter](https://github.com/editor-js/delimiter)\n- [Raw](https://github.com/editor-js/raw)\n- [Table](https://github.com/editor-js/table)\n- [Warning](https://github.com/editor-js/warning)\n- [Paragraph](https://github.com/editor-js/paragraph)\n- [Checklist](https://github.com/editor-js/checklist)\n\n## Installation\n\n```bash\n# NPM\nnpm install --save vue-editor-js\n\n# or Yarn\nyarn add vue-editor-js\n```\n\n## Usage\n\n### In main.js\n```js\n// ...\nimport Editor from 'vue-editor-js'\n\nVue.use(Editor)\n// ...\n```\n\n### In Nuxt.js\n```js\n// in nuxt.config.js\nplugins: [\n  {\n    src: '~/plugins/vue-editor.js', ssr: false\n  }\n],\n\n// in ~/plugins/vue-editor.js\nimport Vue from 'vue'\nimport Editor from 'vue-editor-js'\n\nVue.use(Editor)\n```\n\n```Vue\n  \u003ceditor ref=\"editor\" :config=\"config\" :initialized=\"onInitialized\"/\u003e\n```\n\nDefine the initialization function to get the instance of editor.js when initializing\n\nIf you are confused with using it with Nuxt, please see [here](https://github.com/ChangJoo-Park/vue-editor-on-nuxt)\n\n## Local import\n\nIf you wish to only import Editor on a single component then you can do so by following the instructions below\n\n1. Make sure to install `@vue/composition-api`\n```bash\n# NPM\nnpm i --save @vue/composition-api\n\n# or Yarn\nyarn add @vue/composition-api\n```\n2. In main.js:\n```js\nimport Vue from 'vue'\nimport VueCompositionApi from '@vue/composition-api'\n\nVue.use(VueCompositionApi)\n```\n3. Don't import anything from `'vue-editor-js'` in main.js\n4. In your component:\n```js\nimport { Editor } from 'vue-editor-js'\n\nexport default {\n  // ...\n  components: {\n    Editor,\n  },\n  // ...\n}\n```\n\n## Tools\n### Supported tools\nSame as in Supported Plugins, but with different naming\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\n\n### Usage\n\n1. Install the editorjs tool\n\n```bash\n# NPM\nnpm install --save @editorjs/header\n\n# or Yarn\nyarn add @editorjs/header\n```\n\n2. Insert the package into the config prop\n\n```vue\n\u003ceditor\n    ...\n    :config=\"{\n        tools: {\n          header: require('@editorjs/header')\n        }\n    }\"\n/\u003e\n```\n\n#### Saving Example Code\n```vue\n\u003ctemplate\u003e\n\t\u003cdiv id=\"app\"\u003e\n\t\t\u003cEditor ref=\"editor\" :config=\"config\" /\u003e\n\n\t\t\u003cbutton @click=\"invokeSave\"\u003eSave\u003c/button\u003e\n\t\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n\texport default {\n\t\tmethods: {\n\t\t\tinvokeSave() {\n\t\t\t\tthis.$refs.editor._data.state.editor.save()\n\t\t\t\t\t.then((data) =\u003e {\n\t\t\t\t\t\t// Do what you want with the data here\n\t\t\t\t\t\tconsole.log(data)\n\t\t\t\t\t})\n\t\t\t\t\t.catch(err =\u003e { console.log(err) })\n\t\t\t}\n\t\t},\n\t}\n\u003c/script\u003e\n```\n\n## Upload Image (\u003e= 1.1.0)\n\nfor uploading images, You will need a backend for processing the images. vue-editor-js provides a special `config` prop for easability.\nIf you are testing your server to upload an image, please see [server example](https://github.com/ChangJoo-Park/vue-editor-js-imageserver).\n\n```vue\n\u003ceditor :config=\"config\" /\u003e\n\n\u003cscript\u003e\n...\ndata() {\n  return {\n      config: {\n        image: {\n          // Like in https://github.com/editor-js/image#config-params\n          endpoints: {\n            byFile: 'http://localhost:8090/image',\n            byUrl: 'http://localhost:8090/image-by-url',\n          },\n          field: 'image',\n          types: 'image/*',\n        },\n      }\n  }\n}\n\u003c/script\u003e\n```\n\n## upload personality avatar ( \u003e= 2.0.1)\n\n```js\n  config: {\n    personality: {\n      endpoints: 'http://localhost:8090/image'\n    }\n```\n\n![](https://user-images.githubusercontent.com/1451365/69627876-d7ca9600-108e-11ea-85c7-1e52c4284758.png)\n\n### Other props:\n- customTools - Object with name (key) and class of a custom tool (value)\n\nEnjoy editorjs with Vue.js Project :tada:\n\n## How to Contribute?\n\n1. fork this project.\n2. edit code.\n3. PR\n\n_OR_\n\n1. Just submit a issue!\n\n## Contributors\n\n- [ChangJoo Park](https://github.com/changjoo-park)\n- [yashha](https://github.com/yashha)\n- [Loskir](https://github.com/Loskir)\n\n\n## Wallaby.js\n\n[![Wallaby.js](https://img.shields.io/badge/wallaby.js-powered-blue.svg?style=for-the-badge\u0026logo=github)](https://wallabyjs.com/oss/)\n\nThis repository contributors are welcome to use\n[Wallaby.js OSS License](https://wallabyjs.com/oss/) to get\ntest results immediately as you type, and see the results in\nyour editor right next to your code.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FChangJoo-Park%2Fvue-editor-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FChangJoo-Park%2Fvue-editor-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FChangJoo-Park%2Fvue-editor-js/lists"}