vue-wysiwyg

A WYSIWYG HTML editor for Vue.js

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-wysiwyg
1.7.25 years ago7 years agoMinified + gzip package size for vue-wysiwyg in KB

Readme

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

All keys are optional.
{
  // { [module]: boolean (set true to hide) }
  hideModules: { "bold": true },

  // you can override icons too, if desired
  // just keep in mind that you may need custom styles in your application to get everything to align
  iconOverrides: { "bold": "<i class="your-custom-icon"></i>" },

  // if the image option is not set, images are inserted as base64
  image: {
    uploadURL: "/api/myEndpoint",
    dropzoneOptions: {}
  },

  // limit content height if you wish. If not set, editor size will grow with content.
  maxHeight: "500px"
}
Available Modules: - bold - italic - underline - justifyLeft - justifyCenter - justifyRight - headings - link - code - orderedList - unorderedList - image - table - removeFormat - separator
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