[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-10058":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":21,"hasPages":21,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":42,"readmeContent":43,"aiSummary":44,"trendingCount":16,"starSnapshotCount":16,"syncStatus":45,"lastSyncTime":46,"discoverSource":47},10058,"vue-quill-editor","surmon-china\u002Fvue-quill-editor","surmon-china","@quilljs editor component for @vuejs(2)","https:\u002F\u002Fgithub.surmon.me\u002Fvue-quill-editor",null,"JavaScript",7408,1021,106,254,0,1,4,40.03,"MIT License",false,"main",[24,25,26,27,28,29,30,31,32,33,34,35,36,5,37,38,39,40,41],"editor","editor-plugin","quil","quill","quill-editor","quill-vue","quilljs","text-editor","vue","vue-component","vue-components","vue-directive","vue-plugin","vue-resource","vue2","vuejs","vuejs2","web-editor","2026-06-12 02:02:16","# vue-quill-editor\r\n\r\n[![vue](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FMADE%20WITH-VUE-42a97a?style=for-the-badge&labelColor=35495d)](https:\u002F\u002Fvuejs.org)\r\n \r\n[![GitHub stars](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fsurmon-china\u002Fvue-quill-editor.svg?style=for-the-badge)](https:\u002F\u002Fgithub.com\u002Fsurmon-china\u002Fvue-quill-editor\u002Fstargazers)\r\n \r\n[![GitHub issues](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fissues\u002Fsurmon-china\u002Fvue-quill-editor.svg?style=for-the-badge)](https:\u002F\u002Fgithub.com\u002Fsurmon-china\u002Fvue-quill-editor\u002Fissues)\r\n \r\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fvue-quill-editor?color=c7343a&label=npm&style=for-the-badge)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fvue-quill-editor)\r\n \r\n[![license](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Fmashape\u002Fapistatus.svg?style=for-the-badge)](\u002FLICENSE)\r\n\r\n**[Quill](https:\u002F\u002Fgithub.com\u002Fquilljs\u002Fquill) editor** component for **Vue(2).**\r\n\r\n---\r\n\r\n### DEPRECATED ‼️\r\n\r\nUnfortunately, since the [Quill](https:\u002F\u002Fgithub.com\u002Fquilljs\u002Fquill) 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:\u002F\u002Ftiptap.dev\u002Finstallation\u002Fvue3), 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:\u002F\u002Fgithub.com\u002Fquilljs\u002Fquill\u002Fissues\u002F3359)\r\n- [Project still active?](https:\u002F\u002Fgithub.com\u002Fquilljs\u002Fquill\u002Fissues\u002F3112)\r\n- [Switching editor lib as QuillJS is dead](https:\u002F\u002Fgithub.com\u002FEvitanRelta\u002Fmarkgh\u002Fissues\u002F3)\r\n- [What's the status of this project? It's been over 2 years since 1.3.7 release.](https:\u002F\u002Fgithub.com\u002Fquilljs\u002Fquill\u002Fissues\u002F3521)\r\n\r\n---\r\n\r\n### Example\r\n\r\n- [Component examples](https:\u002F\u002Fsurmon-china.github.io\u002Fvue-quill-editor)\r\n- [CDN examples](https:\u002F\u002Fjsfiddle.net\u002Fsurmon\u002Ffpojgkmy\u002F)\r\n\r\n\r\n### Documentation\r\n\r\n- [Quill Guides](https:\u002F\u002Fquilljs.com\u002Fguides)\r\n- [Quill APIs](https:\u002F\u002Fquilljs.com\u002Fdocs\u002Fapi\u002F)\r\n- [Quill Documentation](https:\u002F\u002Fquilljs.com\u002Fdocs)\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\u002Fto\u002Fquill.core.css\"\u002F>\r\n\u003Clink rel=\"stylesheet\" href=\"path\u002Fto\u002Fquill.snow.css\"\u002F>\r\n\u003Clink rel=\"stylesheet\" href=\"path\u002Fto\u002Fquill.bubble.css\"\u002F>\r\n\u003Cscript type=\"text\u002Fjavascript\" src=\"path\u002Fto\u002Fquill.js\">\u003C\u002Fscript>\r\n\u003Cscript type=\"text\u002Fjavascript\" src=\"path\u002Fto\u002Fvue.min.js\">\u003C\u002Fscript>\r\n\u003Cscript type=\"text\u002Fjavascript\" src=\"path\u002Fto\u002Fdist\u002Fvue-quill-editor.js\">\u003C\u002Fscript>\r\n\u003Cscript type=\"text\u002Fjavascript\">\r\n  Vue.use(window.VueQuillEditor)\r\n\u003C\u002Fscript>\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\u002Fdist\u002Fquill.core.css' \u002F\u002F import styles\r\nimport 'quill\u002Fdist\u002Fquill.snow.css' \u002F\u002F for snow theme\r\nimport 'quill\u002Fdist\u002Fquill.bubble.css' \u002F\u002F for bubble theme\r\n\r\nVue.use(VueQuillEditor, \u002F* { default global options } *\u002F)\r\n```\r\n\r\n#### Local component\r\n\r\n```javascript\r\nimport 'quill\u002Fdist\u002Fquill.core.css'\r\nimport 'quill\u002Fdist\u002Fquill.snow.css'\r\nimport 'quill\u002Fdist\u002Fquill.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:\u002F\u002Fgithub.com\u002Fsurmon-china\u002Fsurmon-china.github.io\u002Ftree\u002Fsource\u002Flegacies\u002Fvue-quill-editor\u002Fnuxt).\r\n\r\n### Register Quill module\r\n\r\n```javascript\r\nimport Quill from 'quill'\r\nimport yourQuillModule from '..\u002FyourModulePath\u002FyourQuillModule.js'\r\nQuill.register('modules\u002FyourQuillModule', yourQuillModule)\r\n\r\n\u002F\u002F Vue app...\r\n```\r\n\r\n### Component\r\n\r\n``` vue\r\n\u003Ctemplate>\r\n  \u003C!-- Two-way Data-Binding -->\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  \u002F>\r\n\r\n  \u003C!-- Or manually control the data synchronization -->\r\n  \u003Cquill-editor\r\n    :content=\"content\"\r\n    :options=\"editorOption\"\r\n    @change=\"onEditorChange($event)\"\r\n  \u002F>\r\n\u003C\u002Ftemplate>\r\n\r\n\u003Cscript>\r\n  \u002F\u002F You can also register Quill modules in the component\r\n  import Quill from 'quill'\r\n  import someModule from '..\u002FyourModulePath\u002FsomeQuillModule.js'\r\n  Quill.register('modules\u002FsomeModule', someModule)\r\n  \r\n  export default {\r\n    data () {\r\n      return {\r\n        content: '\u003Ch2>I am Example\u003C\u002Fh2>',\r\n        editorOption: {\r\n          \u002F\u002F 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\u002Fscript>\r\n```\r\n\r\n### Issues\r\n- [Add attributes from toolbar options](https:\u002F\u002Fgithub.com\u002Fquilljs\u002Fquill\u002Fissues\u002F1084)\r\n- [Option to insert an image from a URL](https:\u002F\u002Fgithub.com\u002Fquilljs\u002Fquill\u002Fissues\u002F893)\r\n- [How vue-quill-editor combine with the syntax highlighter module of highlight.js](https:\u002F\u002Fgithub.com\u002Fsurmon-china\u002Fvue-quill-editor\u002Fissues\u002F39)\r\n- [配合 element-ui 实现上传图片\u002F视频到七牛 demo](https:\u002F\u002Fgithub.com\u002Fsurmon-china\u002Fvue-quill-editor\u002Fissues\u002F102)\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\u002FSSR](https:\u002F\u002Fgithub.com\u002Fsurmon-china\u002Fvue-quill-editor\u002Fissues\u002F171#issuecomment-370253411)\r\n\r\n\r\n### Quill Modules\r\n- [quill-image-extend-module](https:\u002F\u002Fgithub.com\u002FNextBoy\u002Fquill-image-extend-module)\r\n- [quill-image-resize-module](https:\u002F\u002Fgithub.com\u002Fkensnyder\u002Fquill-image-resize-module)\r\n- [quill-image-drop-module](https:\u002F\u002Fgithub.com\u002Fkensnyder\u002Fquill-image-drop-module)\r\n- [quilljs-table](https:\u002F\u002Fgithub.com\u002Fdost\u002Fquilljs-table)\r\n- [more modules...](https:\u002F\u002Fgithub.com\u002Fsearch?o=desc&q=quill+module&s=stars&type=Repositories&utf8=%E2%9C%93)\r\n\r\n\r\n### Changelog\r\n\r\nDetailed changes for each release are documented in the [release notes](\u002FCHANGELOG.md).\r\n\r\n### License\r\n\r\nLicensed under the [MIT](\u002FLICENSE) License.\r\n","vue-quill-editor 是一个基于 Vue(2) 的 Quill 富文本编辑器组件。它集成了 Quill 强大的文本编辑功能，支持自定义工具栏、图片上传、代码高亮等特性，并且提供了丰富的 API 供开发者调用。该组件易于集成到 Vue 项目中，适用于需要富文本编辑功能的场景，如博客撰写、论坛发帖和在线文档编辑等。尽管 Quill 项目已不再积极维护，vue-quill-editor 依然可以作为 Vue 2 项目的可靠选择；对于新项目或需要更现代解决方案的情况，建议考虑迁移到 tiptap 等其他编辑器。",2,"2026-06-11 03:26:21","top_topic"]