vue2-quill-editor

HTML editor using Vue.js 2.0 and Quill.js, an open source editor

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue2-quill-editor
2.0.266 years ago6 years agoMinified + gzip package size for vue2-quill-editor in KB

Readme

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
<div id="app">
<vue-editor v-model="content"></vue-editor>
</div>
```

Example

Set Contents After Page Load ```html
<button @click="setEditorContent">Set Editor Contents</button>
<vue-editor v-model="htmlForEditor"></vue-editor>
```

Example

Using Multiple Editors ```html
<vue-editor id="editor1" v-model="editor1Content"></vue-editor>
<vue-editor id="editor2" v-model="editor2Content"></vue-editor>
```

Example

Custom Toolbar ```html
<vue-editor v-model="content" :editorToolbar="customToolbar"></vue-editor>
```

Example

Saving the Content ```html
<button @click="saveContent"></button>
<vue-editor v-model="content"></vue-editor>
```

Example

Use a Live Preview ```html
<vue-editor v-model="content"></vue-editor>
<div v-html="content"></div>
```
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