https://github.com/chmln/vue-wysiwyg

A lightweight WYSIWYG HTML editor for Vue.js
https://github.com/chmln/vue-wysiwyg

vue wysiwyg wysiwyg-editor wysiwyg-html-editor

Last synced: 1 day ago
JSON representation

A lightweight WYSIWYG HTML editor for Vue.js

• Host: GitHub
• URL: https://github.com/chmln/vue-wysiwyg
• Owner: chmln
• License: mit
• Created: 2017-02-07T04:48:40.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2022-12-07T17:27:21.000Z (about 2 years ago)
• Last Synced: 2024-04-14T07:11:07.837Z (10 months ago)
• Topics: vue, wysiwyg, wysiwyg-editor, wysiwyg-html-editor
• Language: JavaScript
• Homepage: https://chmln.github.io/vue-wysiwyg/
• Size: 807 KB
• Stars: 553
• Watchers: 11
• Forks: 134
• Open Issues: 90
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-wysiwyg - vue-wysiwyg - A lightweight WYSIWYG editor for Vue.js. (For Vue)
• awesome-wysiwyg-editors - vue-wysiwyg - 用于 Vue.js 的轻量级 WYSIWYG 编辑器。  (基于 Vue)

README

        
[![](https://user-images.githubusercontent.com/11352152/30252159-1bbb9cfe-963b-11e7-966c-b44116c74a86.png)](https://chmln.github.io/vue-wysiwyg/)

## Usage

### Install vue-wysiwyg

``` bash

npm install vue-wysiwyg --save

```

OR

``` bash

yarn add vue-wysiwyg

```

In your `main.js`:

```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.

```css

@import "~vue-wysiwyg/dist/vueWysiwyg.css";

```

In your components:

```html

```

## Config options

All keys are optional.

```js

{

  // { [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": "" },

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

  // 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

 - dutch

 - german

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`