@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

    Install

    npm i @gorillabot-labs/vue-wysiwyg

    DownloadsWeekly Downloads

    3

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    106 kB

    Total Files

    4

    Last publish

    Collaborators

    • vikeen