vue-poor-editor
v1.0.8
Published
Simple WYSIWYG HTML Editor. poor feature, but rich benefit!
Downloads
16
Maintainers
Readme
How to use
Install
$ npm i vue-poor-editor
Use 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>