I have been associated with the development of a couple of data-driven applications. One of the common requirements is for a few fields to have a ‘rich text’ control.

Rich text allows the user to -

1. Format text - paragraphs, colours, font-types etc.
2. Include media like images and videos

Rich text fields also find usage in report design (a story for another day).

While you can create custom components on top of something like v-text-field to support rich text editing, why do that when there are ready components?

My “deep research” has led me to believe that the easiest and efficient component for enabling rich text controls in VueJS is -

(holding your breath?)

Vue Quill Editor

Vue Quill Editor just works and is wonderful for beginners and more than a few quasi-experts like myself.

• Package is self contained and doesn’t require you to scramble for packages (has about 5 dependencies incl. Quill but who’s counting. This is Node, people)
• Loads fast (comparatively - again, I am no expert. The thing works)
• Format like there is no tomorrow
• Upload images without banking an eyelid (you can resize images with an additional module). Probable downside - the images are tagged against fields by default. You can change that behaviour to point to a file system though.
• Easy to work with

1
2
3
4
5
6

// import

// register component

// Use
<quill-editor v-model="closing_comments" />

Find out more on: GitHub
See the editor in action: Product site

Other options -

• Vue WYSIWIG Editor
  Lightest of the lot, and probably faster! But Quill rocks :)
• Froala WYSIWIG Editor
  The officially supported plugin for Vue. It does not appear to be actively developed?
• TinyMCE
  Stands there with CKEditor in my favourites of yore.

Don’t use -

• CKEditor: I was a fan of CK in the olden days. Although the editor is actively supported, the version is in beta and is laggy.