@gorillabot-labs/vue-wysiwyg

2.0.1 • Public • Published

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",

  // set to 'true' this will insert plain text without styling when you paste something into the editor.
  forcePlainTextOnPaste: true,

  // set to 'true' this will strip tags when you paste something into the editor (ignored if forcePlainTextOnPaste = true).
  stripTagsOnPaste: true,

  // If stripTagsOnPaste = true then use this option to allow tags (attributes will still be stripped)
  allowedTags: [],

  // specify editor locale, if you don't specify this, the editor will default to english.
  locale: 'hu'
}

Available Modules:

  • bold
  • italic
  • underline
  • justifyLeft
  • justifyCenter
  • justifyRight
  • headings
  • link
  • code
  • orderedList
  • unorderedList
  • image
  • table
  • removeFormat
  • separator

Available Locales:

  • english (default)
  • hungarian

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

Development

  1. Start webpack server: yarn start

Build

  1. yarn build

Package Sidebar

Install

npm i @gorillabot-labs/vue-wysiwyg

Weekly Downloads

0

Version

2.0.1

License

MIT

Unpacked Size

106 kB

Total Files

4

Last publish

Collaborators

  • vikeen