/vue-wysiwyg

A lightweight WYSIWYG editor for Vue.js

Primary LanguageVue

Usage

Install vue-wysiwyg

npm install vue-wysiwyg --save

OR

yarn add vue-wysiwyg

In your main.js:

import wysiwyg from "vue-wysiwyg";
Vue.use(wysiwyg, {}); // config is optional. more below

Also make sure to load the stylesheet. The exact syntax will depend on what preprocessor you use.

@import "~vue-wysiwyg/dist/vueWysiwyg.css";

In your components:

<wysiwyg v-model="myHTML" />

Config options

{
  hideModules: { "bold": true },
  image: {
    uploadURL: "/api/myEndpoint",
    dropzoneOptions: {}
  }
}

Available Modules:

  • bold
  • italic
  • underline
  • headings
  • link
  • orderedList
  • unorderedList
  • image
  • table
  • removeFormat

Note on the image upload API endpoint:

  • Image is uploaded by multipart/form-data
  • Your endpoint must respond back with a string, the URL for the image - e.g. http://myapp.com/images/12345.jpg