36 lines
739 B
Vue
36 lines
739 B
Vue
<template>
|
|
<textarea v-model="markdown" cols="30" rows="10"></textarea>
|
|
<div ref="target" v-html="html"></div>
|
|
</template>
|
|
|
|
<script>
|
|
import { debounce } from "../helpers";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
markdown: "",
|
|
html: null,
|
|
converter: null,
|
|
onChange: () => {}
|
|
};
|
|
},
|
|
mounted() {
|
|
this.converter = new showdown.Converter();
|
|
this.onChange = debounce(() => {
|
|
this.onChangeHandler();
|
|
}, 500);
|
|
},
|
|
methods: {
|
|
onChangeHandler() {
|
|
this.html = this.converter.makeHtml(this.markdown);
|
|
}
|
|
},
|
|
watch: {
|
|
markdown() {
|
|
this.onChange();
|
|
}
|
|
}
|
|
}
|
|
</script>
|