Works in all modern browsers
In your main.js
:
import wysiwyg from "vueWysiwyg";
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 "vueWysiwyg/dist/vueWysiwyg.css";
In your components:
<wysiwyg v-model="myHTML" />
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
// replace images and set alignments by clicking the image in the editor
image: {
uploadURL: "/api/myEndpoint",
dropzoneOptions: {}
},
// add images on file from front-end
// splits upload dashboard in half and displays the dropzone on the right with the on file images on the left.
// needs css work done
imagesOnFile: [
'http://placehold.it/600x200/',
'http://placehold.it/300x200/',
]
// disable direct image paste
imagePaste: false
// limit content height if you wish. If not set, editor size will grow with content.
maxHeight: "500px",
// set to 'true' this will insert plain text without styling when you paste something into the editor.
forcePlainTextOnPaste: true,
// set default paragraph seperator
paragraphSeperator: 'div',
//set toolbar position to bottom
toolbarPosition: 'bottom',
// insert preset links
addedlinks: [
{
name: 'link name',
link: 'http://www.linktosomewhere.com'
}
],
// insert short html clips
addShortHtml: [
{
name: 'coolness',
html: '<strong>cool html</strong>'
}
]
// insert Templates
templates: [
{
name: 'template name',
html: 'template html',
}
]
}
Available Modules:
Note on the image upload API endpoint:
multipart/form-data
return `http://placehold.it/600x200/`
Edits to the original inspired by: itsyub
Author: uoraa
Source Code: https://github.com/uoraa/vueWysiwyg
#vue #vuejs #javascript