Vue2 Quill Editor

!Vue2Editor-Centered HTML Editor using Vue.js 2.0 and Quilljs

Vue.js

Quill

Install

_You can use Yarn or NPM_

``bash
$ npm install --save vue2-quill-editor
`
OR
`bash
yarn add vue2-quill-editor
`

Usage

`javascript
import { VueEditor } from 'vue2-quill-editor'

//... your code
`

Props

Name | Type | Default | Description
-------------- | ------ | -------------------------------------------------- | ----------------------------------------------------------------------
id | String | quill-container | Set the id (necessary if multiple editors in the same view)
v-model | String | - | Set v-model to the the content or data property you wish to bind it to
placeholder | String | - | Placeholder text for the editor
disabled | Boolean | false | Set to true to disable editor
editorToolbar | Array | ** _Too long for table. See toolbar example below_ | Use a custom toolbar

Example

_Basic Setup_

`html



`

Example

_Set Contents After Page Load_

`html



`

Example

_Using Multiple Editors_

`html





`

Example

_Custom Toolbar_

`html



`

$3

_Saving the Content_
`html



`

Example

_Use a Live Preview_

`html



`

Folder structure

- src/: Source files for this component

- Vue2Editor.vue The component itself

- example/: Example for demonstrating this component

- index.js: Entry for the example
- App.vue: The root component which we use to load this component

- vbuild.example.js: Config file for your example
- vbuild.component.js: Config file for your component
- package.json: App manifest
- .editorconfig: Ensure consistent editor behaivor
- .gitignore: Ignore files we don't need to push

Development

- yarn example: Run example in development mode
- yarn deploy: Deploy example to gh-pages
- yarn build:cjs: Build component in commonjs format
- yarn build:umd: Build component in umd format
- yarn build: Build component in both format
- yarn lint`: Run eslint

Check out your npm scripts, it's using vbuild under the hood.

License

MIT