HTML editor using Vue.js 2.0 and Quill.js, an open source editor
npm install vue2-quill-editorbash
$ 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