2.0.1 • Public • Published


    Install vue-wysiwyg

    npm install vue-wysiwyg --save


    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


    1. Start webpack server: yarn start


    1. yarn build


    npm i @gorillabot-labs/vue-wysiwyg

    DownloadsWeekly Downloads






    Unpacked Size

    106 kB

    Total Files


    Last publish


    • vikeen