Add a WYSIWYG Editor into a Vue App with the vue-wysiwyg NPM Package

We can add a WYSIWYG text editor with the vue-wysiwyg package.

First, we install it by running:

npm i vue-wysiwyg

Next, we register the component and import the CSS by writing:

import Vue from "vue";
import App from "./App.vue";
import wysiwyg from "vue-wysiwyg";
import "vue-wysiwyg/dist/vueWysiwyg.css";

Vue.use(wysiwyg, {});
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

Then we can use the wysiwyg component to add the rich text editor to our app by writing:

<template>
  <div>
    <wysiwyg v-model="content"/>
    <div v-html="content"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: ""
    };
  }
};
</script>

We just bind whatever is entered with v-model.

The entered content will be converted to HTML.

So, we can display the content with v-html.

It also takes an object as a second argument to Vue.use to set the options for the text editor.

This argument is optional.

For instance, we can write:

import Vue from "vue";
import App from "./App.vue";
import wysiwyg from "vue-wysiwyg";
import "vue-wysiwyg/dist/vueWysiwyg.css";

Vue.use(wysiwyg, {
  hideModules: { underline: true },
  iconOverrides: { bold: `<span>bold</span>` },
  image: {
    uploadURL: "/api/myEndpoint",
    dropzoneOptions: {}
  },
  maxHeight: "500px"
});
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

Then we can hide modules with hideModules, iconOverrides lets us change the icons.

image lets us upload an image via a URL.

maxHeight changes the maximum height.

vue-wysiwyg is a very flexible text WYSIWYG text editor for Vuejs.

It has many options that we can add to change the appearance of the editor to what we want.

It outputs HTML so we can use the created data anywhere.