Vue2-Editor 2.0
HTML Editor using Vue.js 2.0 and Quilljs
Install
You can use Yarn or NPM
$ npm install --save vue2-editor
OR
yarn add vue2-editor
Usage
import { VueEditor } from 'vue2-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
<template>
<div id="app">
<vue-editor v-model="content"></vue-editor>
</div>
</template>
<script>
import { VueEditor } from 'vue2-editor'
export default {
components: {
VueEditor
},
data() {
return {
content: '<h1>Some initial content</h1>'
}
}
}
</script>
Example
Set Contents After Page Load
<template>
<div id="app">
<button @click="setEditorContent">Set Editor Contents</button>
<vue-editor v-model="htmlForEditor"></vue-editor>
</div>
</template>
<script>
import { VueEditor } from 'vue2-editor'
export default {
components: {
VueEditor
},
data() {
return {
htmlForEditor: null
}
},
methods: {
setEditorContent: function() {
this.htmlForEditor = '<h1>Html For Editor</h1>'
}
}
}
</script>
Example
Using Multiple Editors
<template>
<div id="app">
<vue-editor id="editor1" v-model="editor1Content"></vue-editor>
<vue-editor id="editor2" v-model="editor2Content"></vue-editor>
</div>
</template>
<script>
import { VueEditor } from 'vue2-editor'
export default {
components: {
VueEditor
},
data() {
return {
editor1Content: '<h1>Editor 1 Starting Content</h1>',
editor2Content: '<h1>Editor 2 Starting Content</h1>',
}
}
}
</script>
<style>
#editor1, #editor2 {
height: 350px;
}
</style>
Example
Custom Toolbar
<template>
<div id="app">
<vue-editor v-model="content" :editorToolbar="customToolbar"></vue-editor>
</div>
</template>
<script>
import { VueEditor } from 'vue2-editor'
export default {
components: {
VueEditor
},
data() {
return {
content: '<h1>Html For Editor</h1>',
customToolbar: [
['bold', 'italic', 'underline'],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
['image', 'code-block']
]
}
}
}
</script>
Example
Saving the Content
<template>
<div id="app">
<button @click="saveContent"></button>
<vue-editor v-model="content"></vue-editor>
</div>
</template>
<script>
import { VueEditor } from 'vue2-editor'
export default {
components: {
VueEditor
},
data () {
return {
content: '<h3>Initial Content</h3>'
}
},
methods: {
handleSavingContent: function() {
// You have the content to save
console.log(this.content)
}
}
}
</script>
Example
Use a Live Preview
<template>
<div id="app">
<vue-editor v-model="content"></vue-editor>
<div v-html="content"></div>
</div>
</template>
<script>
import { VueEditor } from 'vue2-editor'
components: {
VueEditor
},
export default {
data() {
return {
content: '<h1>Initial Content</h1>'
}
}
}
</script>
Folder structure
-
src/
: Source files for this componentVue2Editor.vue
The component itself
-
example/
: Example for demonstrating this componentindex.js
: Entry for the exampleApp.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 modeyarn deploy
: Deploy example to gh-pagesyarn build:cjs
: Build component in commonjs formatyarn build:umd
: Build component in umd formatyarn build
: Build component in both formatyarn lint
: Run eslint
Check out your npm scripts, it's using vbuild under the hood.
License
MIT