Vue2-Editor
HTML Editor using Vue.js 2.0 and Quilljs
Vue.js
Quill
Install
$ npm install --save vue2-editor
Use
import { VueEditor } from 'vue2-editor'
Props
Name |
Type |
Default |
Description |
placeholder |
String |
- |
Placeholder text for the editor |
editor-content |
String |
null |
Set the the content of the editor |
use-save-button |
Boolean |
True |
Set to false to use your own button to save editor content |
button-text |
String |
Save Content |
Set the button's text |
editor-toolbar |
Array |
** Too long for table. See toolbar example below |
Use a custom toolbar |
show-preview |
Boolean |
False |
Set to true to get live preview |
Events
Name |
Description |
editor-updated |
Emitted when the editor contents change |
save-content |
Emitted when the default save button is clicked |
Example
editor-content
<template>
<div id="app">
<button type="button"
@click="setEditorContent">
Set Editor Contents
</button>
<vue-editor
:editor-content="htmlForEditor">
</vue-editor>
</div>
</template>
<script>
import { VueEditor } from 'vue2-editor'
export default {
data: function () {
return {
htmlForEditor: null
}
},
components: {
VueEditor
},
methods: {
setEditorContent: function () {
this.htmlForEditor = '<h1>Html For Editor</h1>'
}
}
}
</script>
Example
show-preview
<vue-editor
:show-preview="true">
</vue-editor>
Example
editor-toolbar
<template>
<div id="app">
<vue-editor
:editor-toolbar="customToolbar">
</vue-editor>
</div>
</template>
<script>
import { VueEditor } from 'vue2-editor'
export default {
data: function () {
return {
customToolbar: [
['bold', 'italic', 'underline'],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
['image', 'code-block']
]
}
},
components: {
VueEditor
}
}
</script>
Example
use-save-button
<vue-editor
:use-save-button="false">
</vue-editor>
Example
button-text
<vue-editor
button-text="Custom Save Message">
</vue-editor>
How do I get the html content from the text editor?
There are 2 different scenarios we need to address.
1. Using the default Save Button
When the button is clicked, the 'save-content' event is emitted with the current contents of the editor.
You need to create a method that runs when this event is emitted and pass a parameter to this method. This parameter holds the editor contents.
Note: The default save button has a class of save-button which you can target for styling the button.
<template>
<div id="app">
<h1>Write Your Message and save it!</h1>
<vue-editor
@save-content="handleSavingContent">
</vue-editor>
</div>
</template>
<script>
import { VueEditor } from 'vue2-editor'
export default {
components: {
VueEditor
},
methods: {
handleSavingContent: function (contentsToBeSaved) {
console.log(contentsToBeSaved)
}
}
}
</script>
<style>
.save-button {
color: #fff;
padding: .5em 1em;
background-color: rgba(53, 73, 94, 0.85);
text-decoration: none;
border-radius: 2px;
cursor: pointer;
font-weight: 900;
transition: background-color .2s ease;
margin: 1em 0;
float: right;
}
.save-button:hover {
background-color: #35495e;
}
</style>
2. Using your own button
The event 'editor-updated' is emitted when the text inside the editor changes. The current editor contents are sent with this event.
You need to create a method that runs when this event is emitted.
EX:
<template>
<div id="app">
<vue-editor
:use-save-button="false"
@editor-updated=handleUpdatedContent>
</vue-editor>
<button type="button" name="save-content"
@click="saveTheContent">
Our Own Button
</button>
</div>
</template>
<script>
import { VueEditor } from 'vue2-editor'
export default {
data: function () {
return {
htmlFromEditor: null
}
},
components: {
VueEditor
},
methods: {
handleUpdatedContent: function (value) {
this.htmlFromEditor = value
},
saveTheContent: function () {
console.log(this.htmlFromEditor)
}
}
}
</script>
Example using several configuration options
<template>
<div id="app">
<button type="button"
@click="setEditorContent">
Set Editor Content
</button>
<vue-editor
:editor-content="htmlForEditor"
:show-preview="true"
@editor-updated="handleUpdatedContent"
@save-content="handleSavingContent"
button-text="Save Your Content">
</vue-editor>
</div>
</template>
<script>
import { VueEditor } from 'vue2-editor'
export default {
data: function () {
return {
htmlForEditor: null
}
},
components: {
VueEditor
},
methods: {
handleSavingContent: function (value) {
console.log(value)
},
handleUpdatedContent: function (value) {
console.log(value);
},
setEditorContent: function () {
this.htmlForEditor = '<h1>Html For Editor</h1>'
}
}
}
</script>
License
MIT