Vue2-Editor 2.0
Install
You can use Yarn or NPM
$ npm install --save vue2-editorOR
yarn add vue2-editorUsage
import { VueEditor } from 'vue2-editor'
//... your codeProps
| 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.vueThe 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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent