surmon-china/vue-quill-editor

★ 7,410JavaScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((vue-quill-editor))
    What it does
      Rich text editing
      Bold headings images
      Two-way data binding
    Status
      Deprecated
      Vue 2 only
      Migrate to Tiptap
    Setup
      npm or yarn
      Script tag install
    Extensibility
      Quill modules
      Image resize
      Table support

mindmap root((vue-quill-editor)) What it does Rich text editing Bold headings images Two-way data binding Status Deprecated Vue 2 only Migrate to Tiptap Setup npm or yarn Script tag install Extensibility Quill modules Image resize Table support

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add a word-processor-style text editor to a Vue 2 app where users can bold text, add headings, and insert images.

USE CASE 2

Bind the editor content to a Vue data property so formatted text stays in sync with your component state automatically.

USE CASE 3

Extend the editor with a Quill module for drag-and-drop image uploads inside an existing Vue 2 project.

Tech stack

JavaScriptVue.jsQuill

Getting it running

Difficulty · easy Time to first run · 30min

Project is deprecated and only supports Vue 2, the maintainer recommends migrating to Tiptap for Vue 3 projects.

In plain English

vue-quill-editor is a rich text editor component built for Vue 2, a popular JavaScript framework for building web interfaces. A rich text editor is the kind of editing box where you can bold text, add headings, insert images, and format content the way you would in a word processor, rather than typing plain text. This particular editor wraps a library called Quill, which handles the actual editing functionality. Important context from the README: this project is deprecated. The Quill library it depends on stopped receiving updates, and the maintainer has marked vue-quill-editor as no longer actively supported. The README recommends migrating to a different editor called Tiptap if you need Vue 3 support. The project will only continue if Quill itself resumes development. Installing it follows the standard package manager route with npm or yarn. It can also be loaded directly via script tags in an HTML page without any build tools. Once installed, you register it with your Vue application either globally (making it available everywhere) or locally within a specific component. The README shows how to bind the editor content to a variable in your Vue component using Vue's two-way data binding, so the editor and your code stay in sync automatically. The component exposes event hooks for when the editor gains focus, loses focus, is ready to use, or when its content changes. It also supports adding Quill extension modules, which are third-party add-ons that extend the editor with capabilities like image resizing, drag-and-drop image uploading, or table support. The README lists several such modules with links. A note on compatibility: this works only with Vue 2. There is no supported Vue 3 version of this package.

Copy-paste prompts

Prompt 1

I have a Vue 2 project and need a rich text editor. Show me how to install vue-quill-editor and bind its content to a data property with two-way sync.

Prompt 2

How do I add a custom Quill module for image resizing to a vue-quill-editor instance in my Vue 2 component?

Prompt 3

I'm using vue-quill-editor in a legacy Vue 2 app and need to migrate to Vue 3. What is Tiptap and how similar is its API?

Open on GitHub → Explain another repo

← surmon-china on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.