Skip to content

raco/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. https://myapp.com/images/12345.jpg

About

A lightweight WYSIWYG editor for Vue.js

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Vue 50.9%
  • JavaScript 48.5%
  • HTML 0.6%