Trigger @change when pasting content into editor
This commit is contained in:
parent
d9361bcd53
commit
aa67a6971a
1 changed files with 13 additions and 3 deletions
|
@ -11,7 +11,7 @@
|
|||
</ul>
|
||||
</div>
|
||||
|
||||
<vue-easymde v-model="text" :configs="config" @change="bubble" class="content" v-if="isEditActive"/>
|
||||
<vue-easymde v-model="text" :configs="config" @change="bubble" class="content" v-if="isEditActive" @input="handleInput"/>
|
||||
|
||||
<div class="preview content" v-if="isPreviewActive" v-html="preview">
|
||||
</div>
|
||||
|
@ -224,7 +224,17 @@
|
|||
this.isEditActive = true
|
||||
},
|
||||
methods: {
|
||||
bubble() {
|
||||
// This gets triggered when only pasting content into the editor.
|
||||
// A change event would not get generated by that, an input event does.
|
||||
// Therefore, we're using this handler to catch paste events.
|
||||
// But because this also gets triggered when typing into the editor, we give
|
||||
// it a higher timeout to make the timouts cancel each other in that case so
|
||||
// that in the end, only one change event is triggered to the outside per change.
|
||||
handleInput(val) {
|
||||
this.text = val
|
||||
this.bubble(1000)
|
||||
},
|
||||
bubble(timeout = 500) {
|
||||
if (this.changeTimeout !== null) {
|
||||
clearTimeout(this.changeTimeout)
|
||||
}
|
||||
|
@ -232,7 +242,7 @@
|
|||
this.changeTimeout = setTimeout(() => {
|
||||
this.$emit('input', this.text)
|
||||
this.$emit('change')
|
||||
}, 500)
|
||||
}, timeout)
|
||||
},
|
||||
replaceAt(str, index, replacement) {
|
||||
return str.substr(0, index) + replacement + str.substr(index + replacement.length);
|
||||
|
|
Loading…
Reference in a new issue