{"id":13387941,"url":"https://github.com/CroudTech/vue-quill","last_synced_at":"2025-03-13T13:32:07.265Z","repository":{"id":57278381,"uuid":"53732389","full_name":"CroudTech/vue-quill","owner":"CroudTech","description":"Quill component for vue","archived":true,"fork":false,"pushed_at":"2019-02-19T08:52:29.000Z","size":43,"stargazers_count":121,"open_issues_count":12,"forks_count":22,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-10-29T10:45:15.691Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","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/CroudTech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-03-12T13:12:38.000Z","updated_at":"2023-09-27T15:36:23.000Z","dependencies_parsed_at":"2022-09-18T18:31:08.295Z","dependency_job_id":null,"html_url":"https://github.com/CroudTech/vue-quill","commit_stats":null,"previous_names":["croudsupport/vue-quill"],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CroudTech%2Fvue-quill","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CroudTech%2Fvue-quill/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CroudTech%2Fvue-quill/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CroudTech%2Fvue-quill/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CroudTech","download_url":"https://codeload.github.com/CroudTech/vue-quill/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243414481,"owners_count":20287129,"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-07-30T13:00:20.862Z","updated_at":"2025-03-13T13:32:06.946Z","avatar_url":"https://github.com/CroudTech.png","language":"Vue","funding_links":[],"categories":["Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","UI组件"],"sub_categories":["Libraries \u0026 Plugins"],"readme":"# vue-quill\n[![npm version](https://badge.fury.io/js/vue-quill.svg)](https://badge.fury.io/js/vue-quill)\n\nA vue component wrapping the quill editor\n\n## Demo\nYou can view a basic demo of this component in this [CodeSandbox](https://codesandbox.io/s/nnw7rwx48m)\n\n## Installation\n```\nnpm install --save vue-quill\n-or-\nyarn add vue-quill\n```\n\nYou will also need to include the following css file in your project\n```html\n\u003clink href=\"https://cdn.quilljs.com/1.2.6/quill.snow.css\" rel=\"stylesheet\"\u003e\n```\n\n## Vue 1\nFor Vue 1 components use v0.1.5 or earlier\n\n## Usage\nInstall the vue plugin\n```js\nimport Vue from 'vue'\nimport VueQuill from 'vue-quill'\n\nVue.use(VueQuill)\n```\n### Component\n```html\n\u003cquill v-model=\"content\"\u003e\u003c/quill\u003e\n```\nYou may want to initialize the synced variable as a valid delta object too\n\n```js\ndata() {\n    return {\n        content: {\n            ops: [],\n        },\n    }\n}\n```\n\n### Configuration\n```html\n\u003cquill v-model=\"content\" :config=\"config\"\u003e\u003c/quill\u003e\n```\nYou can also provide a config object as described in http://quilljs.com/docs/configuration/\n\n```js\ndata() {\n    return {\n        content: {\n            ops: [],\n        },\n        config: {\n            readOnly: true,\n            placeholder: 'Compose an epic...',\n        },\n    }\n}\n```\n\n## Options\nBy default, the component outputs the content as a delta object, you can pass in a prop to return raw html\n```html\n\u003cquill v-model=\"content\" output=\"html\"\u003e\u003c/quill\u003e\n```\n\n## Custom Formats\nTo add custom formats to the editor, you can pass an array of formats as a prop. The array should be in the following format\n```js\nformats: [\n    {\n        name: 'custom',\n        options: {\n            attribute: 'custom',\n        },\n    },\n],\n```\n\n## Custom Keybindings\nYou can add custom keybindings by passing through an array in the props, the array should be in the following format\n```js\nkeyBindings: [\n    {\n        key: 's',\n        method: function(range) {\n            this.$dispatch('save', this.editor, range)\n            return false        \n        },\n    },\n]\n```\n\n## Events\nThis quill component emits events when the text or selection changes on the quill editor\n```html\n\u003cquill v-model=\"content\" @selection-change=\"selectionChange\"\u003e\u003c/quill\u003e\n\n\u003cscript\u003e\nmethods: {\n    selectionChange(editor, range) {\n        if (range) {\n            if (range.start !== range.end) {\n                this.selectedText = editor.getText(range.start, range.end)\n                editor.formatText(range, 'custom', 'hello world')\n            }\n        }\n    },\n},\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCroudTech%2Fvue-quill","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FCroudTech%2Fvue-quill","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCroudTech%2Fvue-quill/lists"}