vue-wysiwyg
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
Dependencies
autoprefixer: ^8.0.0babel-core: ^6.26.0babel-loader: ^7.1.2babel-plugin-transform-runtime: ^6.23.0babel-preset-babili: ^0.1.4babel-preset-es2015: ^6.24.1babel-preset-stage-2: ^6.24.1babel-register: ^6.26.0chalk: ^2.3.1connect-history-api-fallback: ^1.5.0css-loader: ^0.28.9eventsource-polyfill: ^0.9.6express: ^4.16.2extract-text-webpack-plugin: ^3.0.2file-loader: ^1.1.6friendly-errors-webpack-plugin: ^1.6.1function-bind: ^1.1.1html-webpack-plugin: ^2.30.1http-proxy-middleware: ^0.17.4opn: ^5.2.0ora: ^1.4.0pug: ^2.0.0-rc.4semver: ^5.5.0shelljs: ^0.8.1stylus: ^0.54.5stylus-loader: ^3.0.1uglifyjs-webpack-plugin: ^1.2.0url-loader: ^0.6.2vue-loader: ^14.1.1vue-style-loader: ^4.0.2vue-template-compiler: ^2.5.13webpack: ^3.11.0webpack-bundle-analyzer: ^2.10.0webpack-dev-middleware: ^2.0.5webpack-hot-middleware: ^2.21.0webpack-merge: ^4.1.1