1.0.8 • Published 7 years ago
vue-poor-editor v1.0.8
How to use
Install
$ npm i vue-poor-editorUse in browser
index.html
<section>
<div id="app">
<vue-poor-editor
v-model="html" @input="editorListener" @submit:enter="sendContent"></vue-poor-editor>
</div>
</section>new Vue({
el: '#app',
data: {
html: 'write something'
},
methods: {
editorListener: function (html) {
this.html = html
},
sendContent: function (html) {
axios.post('url', {
data: html
})
}
}
})Options
- borderLess
type Boolean
default true
remove border box editor
<vue-poor-editor
v-model="html" @input="editorListener"
:border-less="true"></vue-poor-editor>- instantSend
type Boolean
default true
activated submit on enter event
<vue-poor-editor
v-model="html" @input="editorListener"
:instant-send="true"></vue-poor-editor>- autoFormat
type Boolean
default true
auto format when you paste text from clipboard
<vue-poor-editor
v-model="html" @input="editorListener"
:auto-format="true"></vue-poor-editor>- minHeight
type String
default 100px
resize height box editor
<vue-poor-editor
v-model="html" @input="editorListener"
min-height="400px"></vue-poor-editor>- width
type String
default 100%
resize width box editor
<vue-poor-editor
v-model="html" @input="editorListener"
witdh="700px"></vue-poor-editor>Event
- Input
listen change html content
<vue-poor-editor
v-model="html" @input="editorListener"></vue-poor-editor>- Submit:enter
get content when entered (which 13 without shift key)
this event active when instantSend option is true
<vue-poor-editor
v-model="html" @submit:enter="sendContent"></vue-poor-editor>
