The best rich text editors for Vue: Under pressure

As one of the most popular JavaScript UI frameworks, Vue has a vibrant community and ecosystem. Its most recent v3 release has helped Vue to take the web development world by storm thanks to improved API, faster performance, and a better development experience.

With all these advantages, it’s no surprise that Vue is excellent no matter what kind of web app you’re building – even when you’re incorporating a rich text editor. Thanks to its versatility and rich collection of third-party libraries, tools, and integrations, creating a Vue WYSIWYG editor with rich inline or block formatting, advanced embeds, and accessible, user-focused UI has never been more straightforward.

This post covers some of the best rich text editors (RTEs) for Vue, and evaluates them for:

• Efficiency and ease of setup
• Quality of documentation
• Development experience (ease of use, TypeScript support, etc.)
• Integration with Vue and support for Vue 3

Comparing Rich Text Editors

Let’s start with a quick comparison table. It should give you a good idea of how all seven of the compared RTEs stack up against each other, while also serving as a handy reference point later on in your review.

TinyMCE

TinyMCE is one of the leading RTEs on the market. It’s a highly advanced What You See Is What You Get (WYSIWYG) editor with a plethora of features and a high level of customizability. Its core is open source and free, with premium paid plans offering more advanced features and cloud integration.

In terms of Vue integration and installation speed, TinyMCE is among the best. It provides first-party integrations for many frameworks and libraries, including Vue, with Vue 3 and TypeScript being well supported. The installation is quick, and a basic setup requires only about thirty lines of code (LOCs) to complete.

App.vue:

<template>
   <div id="app">
     <img alt="Vue logo" src="./assets/logo.png">
     <editor
       api-key="no-api-key"
       :init="{
         height: 500,
         menubar: false,
         plugins: [
           'advlist autolink lists link image charmap print preview anchor',
           'searchreplace visualblocks code fullscreen',
           'insertdatetime media table paste code help wordcount'
         ],
         toolbar:
           'undo redo | formatselect | bold italic backcolor | \
           alignleft aligncenter alignright alignjustify | \
           bullist numlist outdent indent | removeformat | help'
       }"
     />
   </div>
 </template>

 <script>
 import Editor from '@tinymce/tinymce-vue'
 export default {
   name: 'app',
   components: {
     'editor': Editor
   }
 }
 </script>

Finally, the quality of documentation and code is top-notch, meaning faster development and easier long-term maintenance.

Tiptap

Tiptap is a headless RTE framework for creating entirely custom text editing experiences. It was initially developed for Vue 2 and has evolved into a framework-independent tool, with first-party integrations for Vue 3, React, Svelte, and other platforms. It’s written entirely in TypeScript and builds upon the renowned ProseMirror toolkit.

App.vue:

<template>
  <editor-content :editor="editor" />
</template>

<script>
import { useEditor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
export default {
  components: {
    EditorContent,
  },
  setup() {
    const editor = useEditor({
      content: '<p>I’m running Tiptap with Vue.js. 🎉</p>',
      extensions: [
        StarterKit,
      ],
    })
    return { editor }
  },
}
</script>

What differentiates Tiptap is its headless approach. Tiptap doesn’t come with any styles by default, meaning there’s more customization options, but there’s also more work to get something that looks decent. This additional customization isn’t included in the installation speed metric, as it can vary quite a bit, but it’s something to keep in mind.

Tiptap’s documentation and code itself are of very high quality. The docs may not be as detailed as TinyMCE’s, but they have everything you need to get started. For more advanced use cases, you might have to consult the documentation of the underlying ProseMirror toolkit.

CKEditor 5

CKEditor 5, alongside TinyMCE, is one of the most popular premium WYSIWYG editors. It's open-source and available for free for limited commercial use, and provides advanced features like widgets, real-time collaboration, and change history with a paid subscription.

Installation of CKEditor 5 is very quick, and with a dedicated Vue 3 integration, it takes only about twenty LOCs.

App.vue:

<template>
    <div id="app">
        <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
    </div>
</template>

<script>
    import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
    export default {
        name: 'app',
        data() {
            return {
                editor: ClassicEditor,
                editorData: '<p>Content of the editor.</p>',
                editorConfig: {
                    // The configuration of the editor.
                }
            };
        }
    }
</script>

Unfortunately, CKEditor 5 doesn't come with first-party TypeScript support. The core library typings are available on DefinitelyTyped, but are mostly community-driven, while the Vue integration doesn't come with any typings whatsoever.

Thankfully, the lack of types is offset by CKEditor's highly-detailed documentation. In it, you'll find everything you need to get started, customize your editor, and integrate with different frameworks, like Vue 3.

Quill

Quill is one of the most popular RTEs, while also being one of the easiest WYSIWYG editors to set up. As it’s been around for a while, it also has a pretty large community and an entire ecosystem of plug-ins and integrations around it.

While Quill comes with external TypeScript typings, it has no first-party Vue integration. Thankfully, it’s relatively easy to find third-party integrations for several frameworks due to its extensive ecosystem. VueQuill, for example, is a decent Quill integration for Vue 3, with TypeScript support and good docs included. With VueQuill, the setup process takes only about ten LOCs within your App.vue file.

App.vue:

<template>
  <QuillEditor theme="snow" />
</template>

<script>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
export default {
  components: {
    QuillEditor
  }
}
</script>

That said, even if the integration reduces the initial setup, it also means more installation effort for additional dependencies. The maintainability of such integration can also be questioned.

Speaking about maintenance, that’s one of Quill’s weak points. Both the repository and the related npm package seem a bit stale. Also, while detailed and of good quality, the documentation appears to be stuck in the past. Still, with its large community, Quill isn’t going anywhere anytime soon.

Froala

Froala WYSIWYG editor focuses on clean UI and modern design. Its business model is similar to TinyMCE’s and CK Editor's – providing the core features for free, with more advanced functionality requiring a subscription or perpetual license.

As a premium RTE without TypeScript typings, Froala doesn’t make a good first impression. In addition, its Vue integration is limited to Vue 2. However, even when you stick with Vue 2 to use Froala, the integration docs and setup speed leave a lot to be desired. On top of about thirty LOCs, you also have to set up webpack configurations properly.

index.js:

// Require Froala Editor js file.
require("froala-editor/js/froala_editor.pkgd.min.js");

// Require Froala Editor css files.
require("froala-editor/css/froala_editor.pkgd.min.css");
require("froala-editor/css/froala_style.min.css");

// Import and use Vue Froala lib.
import VueFroala from "vue-froala-wysiwyg";
Vue.use(VueFroala);

App.vue:

<template>
  <div id="app">
    <froala :tag="'textarea'" :config="config" v-model="model"></froala>
  </div>
</template>
<script> import VueFroala from 'vue-froala-wysiwyg';
export default {
  name: 'app',
  data () {
    return {
      config: {
        events: {
          'froalaEditor.initialized': function () {
            console.log('initialized')
          }
        }
      },
      model: 'Edit Your Content Here!'
    }
  }
} </script>

webpack.config.js:

var webpack = require('webpack')
var path = require('path')

module.exports = {
  module: {
    loaders: [
      // ...
      // Css loader.
      {
        test: /\.css$/,
        loader: 'vue-style-loader!css-loader'
      }
    ]
  },
  vue: {
    loaders: {
      // ...
      // Css loader for Webpack 1.x .
      css: 'vue-style-loader!css-loader'
    }
  }
})

Overall, the initial setup of Froala doesn’t provide a positive experience.

Thankfully, the documentation (aside from framework integrations), is pretty good and reasonably detailed. It might help with implementation and long-term maintenance, but again, without TypeScript or Vue 3 support, Froala isn’t a future-proof choice.

Conclusion

To summarize, when it comes to RTEs, there are a lot of options available. Depending on what you’re looking for – from quick setup, customization, and great docs to a pleasing development experience – there’s an option for everyone. If you’ve chosen to go with TinyMCE, be sure to learn more about it through its comprehensive docs on TinyMCE’s Vue integration.