You can use Yarn or NPM
$ npm install --save vue2-editorOR
yarn add vue2-editorimport { VueEditor } from 'vue2-editor'
//... your code| 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 |
| useCustomImageHandler | Boolean | false | Handle image uploading instead of using default conversion to Base64 |
| 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 |
| Name | Parameters | Description |
|---|---|---|
| imageAdded | file, Editor, cursorLocation | Emitted when useCustomImageHandler is true and photo is being added to the editor |
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>Upload image to server and use returned url instead of data URL
If you choose to use the custom image handler, an event is emitted when a a photo is selected. You can see below that 3 parameters are passed.
- It passes the file to be handled however you need
- The Editor instance
- The cursor position at the time of upload so the image can be inserted at the correct position on success
NOTE In addition to this example, I have created a new example repo demonstrating this new feature with an actual server.
<template>
<div id="app">
<vue-editor id="editor"
useCustomImageHandler
@imageAdded="handleImageAdded" v-model="htmlForEditor">
</vue-editor>
</div>
</template>
<script>
import { VueEditor } from 'vue2-editor'
import axios from 'axios'
export default {
components: {
VueEditor
},
data() {
return {
htmlForEditor: ''
}
},
methods: {
handleImageAdded: function(file, Editor, cursorLocation) {
// An example of using FormData
// NOTE: Your key could be different such as:
// formData.append('file', file)
var formData = new FormData();
formData.append('image', file)
axios({
url: 'https://fakeapi.yoursite.com/images',
method: 'POST',
data: formData
})
.then((result) => {
let url = result.data.url // Get url from response
Editor.insertEmbed(cursorLocation, 'image', url);
})
.catch((err) => {
console.log(err);
})
}
}
}
</script>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>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>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>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>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>-
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
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.
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent