{"id":13486780,"url":"https://github.com/surmon-china/vue-quill-editor","last_synced_at":"2025-05-12T15:26:53.721Z","repository":{"id":37432358,"uuid":"76567547","full_name":"surmon-china/vue-quill-editor","owner":"surmon-china","description":"@quilljs editor component for @vuejs(2)","archived":false,"fork":false,"pushed_at":"2024-05-17T09:28:34.000Z","size":643,"stargazers_count":7417,"open_issues_count":264,"forks_count":1027,"subscribers_count":107,"default_branch":"main","last_synced_at":"2025-05-12T00:06:53.992Z","etag":null,"topics":["editor","editor-plugin","quil","quill","quill-editor","quill-vue","quilljs","text-editor","vue","vue-component","vue-components","vue-directive","vue-plugin","vue-quill-editor","vue-resource","vue2","vuejs","vuejs2","web-editor"],"latest_commit_sha":null,"homepage":"https://github.surmon.me/vue-quill-editor","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/surmon-china.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-12-15T14:38:40.000Z","updated_at":"2025-05-09T12:23:08.000Z","dependencies_parsed_at":"2024-11-09T20:03:10.346Z","dependency_job_id":"87cc776f-fcac-4865-b5cb-bf34d067a090","html_url":"https://github.com/surmon-china/vue-quill-editor","commit_stats":{"total_commits":128,"total_committers":16,"mean_commits":8.0,"dds":0.5546875,"last_synced_commit":"636533f1d277ff7792e09157cbc12a78cb4c2615"},"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surmon-china%2Fvue-quill-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surmon-china%2Fvue-quill-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surmon-china%2Fvue-quill-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surmon-china%2Fvue-quill-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/surmon-china","download_url":"https://codeload.github.com/surmon-china/vue-quill-editor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253764882,"owners_count":21960652,"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","editor-plugin","quil","quill","quill-editor","quill-vue","quilljs","text-editor","vue","vue-component","vue-components","vue-directive","vue-plugin","vue-quill-editor","vue-resource","vue2","vuejs","vuejs2","web-editor"],"created_at":"2024-07-31T18:00:51.030Z","updated_at":"2025-05-12T15:26:53.656Z","avatar_url":"https://github.com/surmon-china.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Rich text editor","UI组件","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","Components \u0026 Libraries","vuejs","UI Components","Uncategorized","UI Components [🔝](#readme)"],"sub_categories":["Libraries \u0026 Plugins","形成","UI Components","Form","Uncategorized"],"readme":"# vue-quill-editor\r\n\r\n[![vue](https://img.shields.io/badge/MADE%20WITH-VUE-42a97a?style=for-the-badge\u0026labelColor=35495d)](https://vuejs.org)\r\n\u0026nbsp;\r\n[![GitHub stars](https://img.shields.io/github/stars/surmon-china/vue-quill-editor.svg?style=for-the-badge)](https://github.com/surmon-china/vue-quill-editor/stargazers)\r\n\u0026nbsp;\r\n[![GitHub issues](https://img.shields.io/github/issues/surmon-china/vue-quill-editor.svg?style=for-the-badge)](https://github.com/surmon-china/vue-quill-editor/issues)\r\n\u0026nbsp;\r\n[![npm](https://img.shields.io/npm/v/vue-quill-editor?color=c7343a\u0026label=npm\u0026style=for-the-badge)](https://www.npmjs.com/package/vue-quill-editor)\r\n\u0026nbsp;\r\n[![license](https://img.shields.io/github/license/mashape/apistatus.svg?style=for-the-badge)](/LICENSE)\r\n\r\n**[Quill](https://github.com/quilljs/quill) editor** component for **Vue(2).**\r\n\r\n---\r\n\r\n### DEPRECATED ‼️\r\n\r\nUnfortunately, since the [Quill](https://github.com/quilljs/quill) project has effectively stopped being maintained, `vue-quill-editor` will be **DEPRECATED** and will no longer support Vue3; if you're looking for a rich text editor, I recommend migrating to [**tiptap**](https://tiptap.dev/installation/vue3), which is a much better alternative.\r\n\r\nIf Quill ever updates v2.0, this project will probably continue to be updated as well.\r\nI encourage folks to fork this repository and, if a fork gets popular, I will link to it in this README.\r\n\r\nThe stalled Quill project can be found in these issues:\r\n\r\n- [Is quill dead?](https://github.com/quilljs/quill/issues/3359)\r\n- [Project still active?](https://github.com/quilljs/quill/issues/3112)\r\n- [Switching editor lib as QuillJS is dead](https://github.com/EvitanRelta/markgh/issues/3)\r\n- [What's the status of this project? It's been over 2 years since 1.3.7 release.](https://github.com/quilljs/quill/issues/3521)\r\n\r\n---\r\n\r\n### Example\r\n\r\n- [Component examples](https://surmon-china.github.io/vue-quill-editor)\r\n- [CDN examples](https://jsfiddle.net/surmon/fpojgkmy/)\r\n\r\n\r\n### Documentation\r\n\r\n- [Quill Guides](https://quilljs.com/guides)\r\n- [Quill APIs](https://quilljs.com/docs/api/)\r\n- [Quill Documentation](https://quilljs.com/docs)\r\n\r\n### Install\r\n\r\n**NPM**\r\n\r\n``` bash\r\nnpm install vue-quill-editor --save\r\n```\r\n```bash\r\nyarn add vue-quill-editor\r\n```\r\n\r\n**CDN**\r\n\r\n``` html\r\n\u003clink rel=\"stylesheet\" href=\"path/to/quill.core.css\"/\u003e\r\n\u003clink rel=\"stylesheet\" href=\"path/to/quill.snow.css\"/\u003e\r\n\u003clink rel=\"stylesheet\" href=\"path/to/quill.bubble.css\"/\u003e\r\n\u003cscript type=\"text/javascript\" src=\"path/to/quill.js\"\u003e\u003c/script\u003e\r\n\u003cscript type=\"text/javascript\" src=\"path/to/vue.min.js\"\u003e\u003c/script\u003e\r\n\u003cscript type=\"text/javascript\" src=\"path/to/dist/vue-quill-editor.js\"\u003e\u003c/script\u003e\r\n\u003cscript type=\"text/javascript\"\u003e\r\n  Vue.use(window.VueQuillEditor)\r\n\u003c/script\u003e\r\n```\r\n\r\n### Usage\r\n\r\n**Global component**\r\n\r\n``` javascript\r\nimport Vue from 'vue'\r\nimport VueQuillEditor from 'vue-quill-editor'\r\n\r\nimport 'quill/dist/quill.core.css' // import styles\r\nimport 'quill/dist/quill.snow.css' // for snow theme\r\nimport 'quill/dist/quill.bubble.css' // for bubble theme\r\n\r\nVue.use(VueQuillEditor, /* { default global options } */)\r\n```\r\n\r\n#### Local component\r\n\r\n```javascript\r\nimport 'quill/dist/quill.core.css'\r\nimport 'quill/dist/quill.snow.css'\r\nimport 'quill/dist/quill.bubble.css'\r\n\r\nimport { quillEditor } from 'vue-quill-editor'\r\n\r\nexport default {\r\n  components: {\r\n    quillEditor\r\n  }\r\n}\r\n```\r\n\r\n**SSR component**\r\n\r\nSee [Nuxt.js example code](https://github.com/surmon-china/surmon-china.github.io/tree/source/legacies/vue-quill-editor/nuxt).\r\n\r\n### Register Quill module\r\n\r\n```javascript\r\nimport Quill from 'quill'\r\nimport yourQuillModule from '../yourModulePath/yourQuillModule.js'\r\nQuill.register('modules/yourQuillModule', yourQuillModule)\r\n\r\n// Vue app...\r\n```\r\n\r\n### Component\r\n\r\n``` vue\r\n\u003ctemplate\u003e\r\n  \u003c!-- Two-way Data-Binding --\u003e\r\n  \u003cquill-editor\r\n    ref=\"myQuillEditor\"\r\n    v-model=\"content\"\r\n    :options=\"editorOption\"\r\n    @blur=\"onEditorBlur($event)\"\r\n    @focus=\"onEditorFocus($event)\"\r\n    @ready=\"onEditorReady($event)\"\r\n  /\u003e\r\n\r\n  \u003c!-- Or manually control the data synchronization --\u003e\r\n  \u003cquill-editor\r\n    :content=\"content\"\r\n    :options=\"editorOption\"\r\n    @change=\"onEditorChange($event)\"\r\n  /\u003e\r\n\u003c/template\u003e\r\n\r\n\u003cscript\u003e\r\n  // You can also register Quill modules in the component\r\n  import Quill from 'quill'\r\n  import someModule from '../yourModulePath/someQuillModule.js'\r\n  Quill.register('modules/someModule', someModule)\r\n  \r\n  export default {\r\n    data () {\r\n      return {\r\n        content: '\u003ch2\u003eI am Example\u003c/h2\u003e',\r\n        editorOption: {\r\n          // Some Quill options...\r\n        }\r\n      }\r\n    },\r\n    methods: {\r\n      onEditorBlur(quill) {\r\n        console.log('editor blur!', quill)\r\n      },\r\n      onEditorFocus(quill) {\r\n        console.log('editor focus!', quill)\r\n      },\r\n      onEditorReady(quill) {\r\n        console.log('editor ready!', quill)\r\n      },\r\n      onEditorChange({ quill, html, text }) {\r\n        console.log('editor change!', quill, html, text)\r\n        this.content = html\r\n      }\r\n    },\r\n    computed: {\r\n      editor() {\r\n        return this.$refs.myQuillEditor.quill\r\n      }\r\n    },\r\n    mounted() {\r\n      console.log('this is current quill instance object', this.editor)\r\n    }\r\n  }\r\n\u003c/script\u003e\r\n```\r\n\r\n### Issues\r\n- [Add attributes from toolbar options](https://github.com/quilljs/quill/issues/1084)\r\n- [Option to insert an image from a URL](https://github.com/quilljs/quill/issues/893)\r\n- [How vue-quill-editor combine with the syntax highlighter module of highlight.js](https://github.com/surmon-china/vue-quill-editor/issues/39)\r\n- [配合 element-ui 实现上传图片/视频到七牛 demo](https://github.com/surmon-china/vue-quill-editor/issues/102)\r\n- [How to fix “Can’t find variable: Quill”, “Quill is undefined”, “window.Quill is undefined” errors when trying to use Quill modules that use Webpack in Nuxt/SSR](https://github.com/surmon-china/vue-quill-editor/issues/171#issuecomment-370253411)\r\n\r\n\r\n### Quill Modules\r\n- [quill-image-extend-module](https://github.com/NextBoy/quill-image-extend-module)\r\n- [quill-image-resize-module](https://github.com/kensnyder/quill-image-resize-module)\r\n- [quill-image-drop-module](https://github.com/kensnyder/quill-image-drop-module)\r\n- [quilljs-table](https://github.com/dost/quilljs-table)\r\n- [more modules...](https://github.com/search?o=desc\u0026q=quill+module\u0026s=stars\u0026type=Repositories\u0026utf8=%E2%9C%93)\r\n\r\n\r\n### Changelog\r\n\r\nDetailed changes for each release are documented in the [release notes](/CHANGELOG.md).\r\n\r\n### License\r\n\r\nLicensed under the [MIT](/LICENSE) License.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsurmon-china%2Fvue-quill-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsurmon-china%2Fvue-quill-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsurmon-china%2Fvue-quill-editor/lists"}