Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/surmon-china/vue-quill-editor

@quilljs editor component for @vuejs(2)
https://github.com/surmon-china/vue-quill-editor

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

Last synced: 4 days ago
JSON representation

@quilljs editor component for @vuejs(2)

Host: GitHub
URL: https://github.com/surmon-china/vue-quill-editor
Owner: surmon-china
License: mit
Created: 2016-12-15T14:38:40.000Z (almost 8 years ago)
Default Branch: main
Last Pushed: 2024-05-17T09:28:34.000Z (7 months ago)
Last Synced: 2024-10-29T09:51:16.526Z (about 2 months ago)
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
Language: JavaScript
Homepage: https://github.surmon.me/vue-quill-editor
Size: 628 KB
Stars: 7,384
Watchers: 109
Forks: 1,028
Open Issues: 264
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

awesome-quill - vue-quill-editor - Quill editor component for Vue, supports SPA and SSR (Uncategorized / Uncategorized)
awesome-vue - vue-quill-editor - china/vue-quill-editor?style=social) - 基于Quill适用于Vue2的富文本编辑器 (UI组件)
awesome-web-editor - vue-quill-editor - Quill editor component for Vue, support SPA and SSR. (Rich text editor)
awesome-vue - vue-quill-editor - 基于Quill适用于Vue2的富文本编辑器 (UI组件)
awesome-github-vue - vue-quill-editor - 基于Quill适用于Vue2的富文本编辑器 (UI组件)
awesome - vue-quill-editor - 基于Quill适用于Vue2的富文本编辑器 (UI组件)
awesome-github-vue - vue-quill-editor - 基于Quill适用于Vue2的富文本编辑器 (UI组件)

README

        # vue-quill-editor

[![vue](https://img.shields.io/badge/MADE%20WITH-VUE-42a97a?style=for-the-badge&labelColor=35495d)](https://vuejs.org)

 

[![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)

 

[![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)

 

[![npm](https://img.shields.io/npm/v/vue-quill-editor?color=c7343a&label=npm&style=for-the-badge)](https://www.npmjs.com/package/vue-quill-editor)

 

[![license](https://img.shields.io/github/license/mashape/apistatus.svg?style=for-the-badge)](/LICENSE)

**[Quill](https://github.com/quilljs/quill) editor** component for **Vue(2).**

---

### DEPRECATED ‼️

Unfortunately, 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.

If Quill ever updates v2.0, this project will probably continue to be updated as well.

I encourage folks to fork this repository and, if a fork gets popular, I will link to it in this README.

The stalled Quill project can be found in these issues:

- [Is quill dead?](https://github.com/quilljs/quill/issues/3359)

- [Project still active?](https://github.com/quilljs/quill/issues/3112)

- [Switching editor lib as QuillJS is dead](https://github.com/EvitanRelta/markgh/issues/3)

- [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)

---

### Example

- [Component examples](https://surmon-china.github.io/vue-quill-editor)

- [CDN examples](https://jsfiddle.net/surmon/fpojgkmy/)

### Documentation

- [Quill Guides](https://quilljs.com/guides)

- [Quill APIs](https://quilljs.com/docs/api/)

- [Quill Documentation](https://quilljs.com/docs)

### Install

**NPM**

``` bash

npm install vue-quill-editor --save

```

```bash

yarn add vue-quill-editor

```

**CDN**

``` html

  Vue.use(window.VueQuillEditor)

```

### Usage

**Global component**

``` javascript

import Vue from 'vue'

import VueQuillEditor from 'vue-quill-editor'

import 'quill/dist/quill.core.css' // import styles

import 'quill/dist/quill.snow.css' // for snow theme

import 'quill/dist/quill.bubble.css' // for bubble theme

Vue.use(VueQuillEditor, /* { default global options } */)

```

#### Local component

```javascript

import 'quill/dist/quill.core.css'

import 'quill/dist/quill.snow.css'

import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'

export default {

  components: {

    quillEditor

  }

}

```

**SSR component**

See [Nuxt.js example code](https://github.com/surmon-china/surmon-china.github.io/tree/source/legacies/vue-quill-editor/nuxt).

### Register Quill module

```javascript

import Quill from 'quill'

import yourQuillModule from '../yourModulePath/yourQuillModule.js'

Quill.register('modules/yourQuillModule', yourQuillModule)

// Vue app...

```

### Component

``` vue

  

  

  

  

  // You can also register Quill modules in the component

  import Quill from 'quill'

  import someModule from '../yourModulePath/someQuillModule.js'

  Quill.register('modules/someModule', someModule)

  

  export default {

    data () {

      return {

        content: '<h2>I am Example</h2>',

        editorOption: {

          // Some Quill options...

        }

      }

    },

    methods: {

      onEditorBlur(quill) {

        console.log('editor blur!', quill)

      },

      onEditorFocus(quill) {

        console.log('editor focus!', quill)

      },

      onEditorReady(quill) {

        console.log('editor ready!', quill)

      },

      onEditorChange({ quill, html, text }) {

        console.log('editor change!', quill, html, text)

        this.content = html

      }

    },

    computed: {

      editor() {

        return this.$refs.myQuillEditor.quill

      }

    },

    mounted() {

      console.log('this is current quill instance object', this.editor)

    }

  }

```

### Issues

- [Add attributes from toolbar options](https://github.com/quilljs/quill/issues/1084)

- [Option to insert an image from a URL](https://github.com/quilljs/quill/issues/893)

- [How vue-quill-editor combine with the syntax highlighter module of highlight.js](https://github.com/surmon-china/vue-quill-editor/issues/39)

- [配合 element-ui 实现上传图片/视频到七牛 demo](https://github.com/surmon-china/vue-quill-editor/issues/102)

- [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)

### Quill Modules

- [quill-image-extend-module](https://github.com/NextBoy/quill-image-extend-module)

- [quill-image-resize-module](https://github.com/kensnyder/quill-image-resize-module)

- [quill-image-drop-module](https://github.com/kensnyder/quill-image-drop-module)

- [quilljs-table](https://github.com/dost/quilljs-table)

- [more modules...](https://github.com/search?o=desc&q=quill+module&s=stars&type=Repositories&utf8=%E2%9C%93)

### Changelog

Detailed changes for each release are documented in the [release notes](/CHANGELOG.md).

### License

Licensed under the [MIT](/LICENSE) License.