Skip to content

wolfscott/vue-wysiwyg

Repository files navigation

Usage

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"
  }
}

Available Modules:

  • bold
  • headings
  • hyperlink
  • image
  • italic
  • list_ordered
  • list_unordered
  • removeFormat
  • table

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

About

A lightweight WYSIWYG HTML editor for Vue.js

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 53.5%
  • Vue 46.1%
  • HTML 0.4%