{"id":13473309,"url":"https://github.com/davidroyer/vue2-editor","last_synced_at":"2025-05-12T20:51:56.262Z","repository":{"id":38418919,"uuid":"75029275","full_name":"davidroyer/vue2-editor","owner":"davidroyer","description":"A text editor using Vue.js and Quill","archived":false,"fork":false,"pushed_at":"2025-04-22T08:04:28.000Z","size":6731,"stargazers_count":2520,"open_issues_count":2,"forks_count":362,"subscribers_count":37,"default_branch":"master","last_synced_at":"2025-04-23T17:39:29.563Z","etag":null,"topics":["editor","quill","quilljs","vue","vue2"],"latest_commit_sha":null,"homepage":"","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/davidroyer.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"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}},"created_at":"2016-11-29T01:12:15.000Z","updated_at":"2025-04-18T05:49:49.000Z","dependencies_parsed_at":"2024-01-17T16:59:11.141Z","dependency_job_id":"e0c18363-40ca-40ef-8f01-b2f037c8802b","html_url":"https://github.com/davidroyer/vue2-editor","commit_stats":{"total_commits":385,"total_committers":4,"mean_commits":96.25,"dds":"0.012987012987012991","last_synced_commit":"3b1ead967ecb775c02c34d15f65923f22b541155"},"previous_names":[],"tags_count":82,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidroyer%2Fvue2-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidroyer%2Fvue2-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidroyer%2Fvue2-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidroyer%2Fvue2-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/davidroyer","download_url":"https://codeload.github.com/davidroyer/vue2-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253821340,"owners_count":21969683,"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","quill","quilljs","vue","vue2"],"created_at":"2024-07-31T16:01:02.564Z","updated_at":"2025-05-12T20:51:56.240Z","avatar_url":"https://github.com/davidroyer.png","language":"JavaScript","funding_links":[],"categories":["Rich text editor","JavaScript","基于 Vue","UI组件","Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)","For Vue"],"sub_categories":["形成","UI Components","Form"],"readme":"# Vue2Editor\n\n\u003e An easy-to-use but yet powerful and customizable rich text editor powered by Quill.js and Vue.js\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.vue2editor.com/\"\u003e\n  \u003ch2\u003eView Docs\u003c/h2\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n![Vue2Editor-Centered](https://www.dropbox.com/s/7com4d32zct44nc/Vue2Editor-Centered.png?raw=1)\n\n[📖 **Release Notes**](./CHANGELOG.md)\n\n\u003c!-- HTML Editor using [Vue.js](https://vuejs.org) and [Quill](http://quilljs.com/) --\u003e\n\n\u003c!-- ## Demo --\u003e\n\n\u003c!-- [fiddle](https://jsfiddle.net/su9zv0w9/1/) --\u003e\n\n## Install\n\n_You can use Yarn or NPM_\n\n```bash\nnpm install vue2-editor\n```\n\n**OR**\n\n```bash\nyarn add vue2-editor\n```\n\n## Usage\n\n```javascript\n// Basic Use - Covers most scenarios\nimport { VueEditor } from \"vue2-editor\";\n\n// Advanced Use - Hook into Quill's API for Custom Functionality\nimport { VueEditor, Quill } from \"vue2-editor\";\n```\n\n## Nuxt.js\n\nAdd `vue2-editor/nuxt` to modules section of `nuxt.config.js`\n\n```javascript\n{\n  modules: [\"vue2-editor/nuxt\"];\n}\n```\n\nTo avoid seeing warnings from Vue about a mismatch in content, you'll need to\nwrap the `VueEditor` component with the `client-only` component Nuxt provides as\nshown here:\n\n```html\n\u003cclient-only\u003e\n  \u003cVueEditor /\u003e\n\u003c/client-only\u003e\n```\n\n## Props\n\n| Name                  | Type    | Default                                              | Description                                                                            |\n| --------------------- | ------- | ---------------------------------------------------- | -------------------------------------------------------------------------------------- |\n| customModules         | Array   | -                                                    | Declare Quill modules to register                                                      | Use a custom toolbar |\n| disabled              | Boolean | false                                                | Set to true to disable editor                                                          |\n| editorOptions         | Object  | -                                                    | Offers object for merging into default config (add formats, custom Quill modules, ect) |\n| editorToolbar         | Array   | \\*\\* _Too long for table. See toolbar example below_ | Use a custom toolbar                                                                   |\n| id                    | String  | quill-container                                      | Set the id (necessary if multiple editors in the same view)                            |\n| placeholder           | String  | -                                                    | Placeholder text for the editor                                                        |\n| useCustomImageHandler | Boolean | false                                                | Handle image uploading instead of using default conversion to Base64                   |\n| v-model               | String  | -                                                    | Set v-model to the the content or data property you wish to bind it to                 |\n\n## Events\n\n| Name             | Parameters                   | Description                                                                         |\n| ---------------- | ---------------------------- | ----------------------------------------------------------------------------------- |\n| blur             | quill                        | Emitted on `blur` event                                                             |\n| focus            | quill                        | Emitted on `focus` event                                                            |\n| image-added      | file, Editor, cursorLocation | Emitted when `useCustomImageHandler` is true and photo is being added to the editor |\n| image-removed    | file, Editor, cursorLocation | Emitted when `useCustomImageHandler` is true and photo has been deleted             |\n| selection-change | range, oldRange, source      | Emitted on Quill's `selection-change` event                                         |\n| text-change      | delta, oldDelta, source      | Emitted on Quill's `text-change` event                                              |\n\n## Examples\n\n### Example - Basic Setup\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cvue-editor v-model=\"content\"\u003e\u003c/vue-editor\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { VueEditor } from \"vue2-editor\";\n\nexport default {\n  components: {\n    VueEditor\n  },\n\n  data() {\n    return {\n      content: \"\u003ch1\u003eSome initial content\u003c/h1\u003e\"\n    };\n  }\n};\n\u003c/script\u003e\n```\n\n### Example - Custom Image Handler\n\nIf you choose to use the custom image handler, an event is emitted when a a photo is selected.\nYou can see below that 3 parameters are passed.\n\n1. It passes the file to be handled however you need\n2. The Editor instance\n3. The cursor position at the time of upload so the image can be inserted at the correct position on success\n\n**NOTE** In addition to this example, I have created a [example repo](https://github.com/davidroyer/vue2editor-images) demonstrating this new feature with an actual server.\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cvue-editor\n      id=\"editor\"\n      useCustomImageHandler\n      @image-added=\"handleImageAdded\"\n      v-model=\"htmlForEditor\"\n    \u003e\n    \u003c/vue-editor\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { VueEditor } from \"vue2-editor\";\nimport axios from \"axios\";\nexport default {\n  components: {\n    VueEditor\n  },\n\n  data() {\n    return {\n      htmlForEditor: \"\"\n    };\n  },\n\n  methods: {\n    handleImageAdded: function(file, Editor, cursorLocation, resetUploader) {\n      // An example of using FormData\n      // NOTE: Your key could be different such as:\n      // formData.append('file', file)\n\n      var formData = new FormData();\n      formData.append(\"image\", file);\n\n      axios({\n        url: \"https://fakeapi.yoursite.com/images\",\n        method: \"POST\",\n        data: formData\n      })\n        .then(result =\u003e {\n          const url = result.data.url; // Get url from response\n          Editor.insertEmbed(cursorLocation, \"image\", url);\n          resetUploader();\n        })\n        .catch(err =\u003e {\n          console.log(err);\n        });\n    }\n  }\n};\n\u003c/script\u003e\n```\n\n### Example - Set Contents After Page Load\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cbutton @click=\"setEditorContent\"\u003eSet Editor Contents\u003c/button\u003e\n    \u003cvue-editor v-model=\"htmlForEditor\"\u003e\u003c/vue-editor\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { VueEditor } from \"vue2-editor\";\n\nexport default {\n  components: {\n    VueEditor\n  },\n\n  data() {\n    return {\n      htmlForEditor: null\n    };\n  },\n\n  methods: {\n    setEditorContent: function() {\n      this.htmlForEditor = \"\u003ch1\u003eHtml For Editor\u003c/h1\u003e\";\n    }\n  }\n};\n\u003c/script\u003e\n```\n\n### Example - Using Multiple Editors\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cvue-editor id=\"editor1\" v-model=\"editor1Content\"\u003e\u003c/vue-editor\u003e\n    \u003cvue-editor id=\"editor2\" v-model=\"editor2Content\"\u003e\u003c/vue-editor\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { VueEditor } from \"vue2-editor\";\n\nexport default {\n  components: {\n    VueEditor\n  },\n\n  data() {\n    return {\n      editor1Content: \"\u003ch1\u003eEditor 1 Starting Content\u003c/h1\u003e\",\n      editor2Content: \"\u003ch1\u003eEditor 2 Starting Content\u003c/h1\u003e\"\n    };\n  }\n};\n\u003c/script\u003e\n\n\u003cstyle\u003e\n#editor1,\n#editor2 {\n  height: 350px;\n}\n\u003c/style\u003e\n```\n\n### Example - Custom Toolbar\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cvue-editor v-model=\"content\" :editorToolbar=\"customToolbar\"\u003e\u003c/vue-editor\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { VueEditor } from \"vue2-editor\";\n\nexport default {\n  components: {\n    VueEditor\n  },\n\n  data() {\n    return {\n      content: \"\u003ch1\u003eHtml For Editor\u003c/h1\u003e\",\n      customToolbar: [\n        [\"bold\", \"italic\", \"underline\"],\n        [{ list: \"ordered\" }, { list: \"bullet\" }],\n        [\"image\", \"code-block\"]\n      ]\n    };\n  }\n};\n\u003c/script\u003e\n```\n\n### Example - Saving The Content\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cbutton @click=\"saveContent\"\u003e\u003c/button\u003e\n    \u003cvue-editor v-model=\"content\"\u003e\u003c/vue-editor\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { VueEditor } from \"vue2-editor\";\n\nexport default {\n  components: {\n    VueEditor\n  },\n\n  data() {\n    return {\n      content: \"\u003ch3\u003eInitial Content\u003c/h3\u003e\"\n    };\n  },\n\n  methods: {\n    handleSavingContent: function() {\n      // You have the content to save\n      console.log(this.content);\n    }\n  }\n};\n\u003c/script\u003e\n```\n\n### Example - Use a Live Preview\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cvue-editor v-model=\"content\"\u003e\u003c/vue-editor\u003e\n    \u003cdiv v-html=\"content\"\u003e\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { VueEditor } from 'vue2-editor'\n\ncomponents: {\n  VueEditor\n},\n\nexport default {\n  data() {\n    return {\n      content: '\u003ch1\u003eInitial Content\u003c/h1\u003e'\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n### How To Use Custom Quill Modules\n\nThere are two ways of using custom modules with Vue2Editor. This is partly because there have been cases in which errors are thrown when importing and attempting to declare custom modules, and partly because I believe it actually separates the concerns nicely.\n\n#### Version 1 - **_Import and Register Yourself_**\n\nVue2Editor now exports Quill to assist in this process.\n\n1. When importing VueEditor, also import Quill.\n2. Import your custom modules\n3. Register the custom modules with Quill\n4. Add the necessary configuration to the `editorOptions` object\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cvue-editor\n      :editorOptions=\"editorSettings\"\n      v-model=\"content\"\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import { VueEditor, Quill } from 'vue2-editor'\n  import { ImageDrop } from 'quill-image-drop-module'\n  import ImageResize from 'quill-image-resize-module'\n\n  Quill.register('modules/imageDrop', ImageDrop)\n  Quill.register('modules/imageResize', ImageResize)\n\n  export default {\n    components: {\n      VueEditor\n    },\n    data() {\n      return {\n        content: '\u003ch1\u003eInitial Content\u003c/h1\u003e',\n        editorSettings: {\n          modules: {\n            imageDrop: true,\n            imageResize: {}\n          }\n        }\n      }\n    }\n  }\n\u003c/script\u003e\n```\n\n#### Version 2 - **_You Import | Vue2Editor Registers_**\n\n**_(Recommended way)_**\n\n1. Import your custom modules\n2. Use the `customModules` prop to declare an array of module(s).\n3. Add the necessary configuration for those modules in the `editorOptions` object under modules as seen below\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cvue-editor\n      :customModules=\"customModulesForEditor\"\n      :editorOptions=\"editorSettings\"\n      v-model=\"content\"\n    \u003e\n    \u003c/vue-editor\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { VueEditor } from \"vue2-editor\";\nimport { ImageDrop } from \"quill-image-drop-module\";\nimport ImageResize from \"quill-image-resize-module\";\n\nexport default {\n  components: {\n    VueEditor\n  },\n  data() {\n    return {\n      content: \"\u003ch1\u003eInitial Content\u003c/h1\u003e\",\n      customModulesForEditor: [\n        { alias: \"imageDrop\", module: ImageDrop },\n        { alias: \"imageResize\", module: ImageResize }\n      ],\n      editorSettings: {\n        modules: {\n          imageDrop: true,\n          imageResize: {}\n        }\n      }\n    };\n  }\n};\n\u003c/script\u003e\n```\n\n---\n\n## Development\n\nVue2Editor now uses [Poi](https://github.com/egoist/poi) for development\n\n- `yarn dev`: Run example in development mode\n- `yarn docs`: Development for Docs\n- `yarn build`: Build component in both format\n- `yarn lint`: Run eslint\n\n\u003c!-- # Achnoledgements\nMarkdown: https://github.com/patleeman/quill-markdown-shortcuts --\u003e\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidroyer%2Fvue2-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavidroyer%2Fvue2-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidroyer%2Fvue2-editor/lists"}