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, {});
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.
{
hideModules: { "bold": true },
iconOverrides: { "bold": "<i class="your-custom-icon"></i>" },
image: {
uploadURL: "/api/myEndpoint",
dropzoneOptions: {}
},
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