119 lines
2.4 KiB
Vue
119 lines
2.4 KiB
Vue
<template>
|
|
<div :id="id" />
|
|
</template>
|
|
|
|
<script>
|
|
// deps for editor
|
|
import 'codemirror/lib/codemirror.css' // codemirror
|
|
import 'tui-editor/dist/tui-editor.css' // editor ui
|
|
import 'tui-editor/dist/tui-editor-contents.css' // editor content
|
|
|
|
import Editor from 'tui-editor'
|
|
import defaultOptions from './default-options'
|
|
|
|
export default {
|
|
name: 'MarkdownEditor',
|
|
props: {
|
|
value: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
id: {
|
|
type: String,
|
|
required: false,
|
|
default() {
|
|
return 'markdown-editor-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
|
|
}
|
|
},
|
|
options: {
|
|
type: Object,
|
|
default() {
|
|
return defaultOptions
|
|
}
|
|
},
|
|
mode: {
|
|
type: String,
|
|
default: 'markdown'
|
|
},
|
|
height: {
|
|
type: String,
|
|
required: false,
|
|
default: '300px'
|
|
},
|
|
language: {
|
|
type: String,
|
|
required: false,
|
|
default: 'en_US' // https://github.com/nhnent/tui.editor/tree/master/src/js/langs
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
editor: null
|
|
}
|
|
},
|
|
computed: {
|
|
editorOptions() {
|
|
const options = Object.assign({}, defaultOptions, this.options)
|
|
options.initialEditType = this.mode
|
|
options.height = this.height
|
|
options.language = this.language
|
|
return options
|
|
}
|
|
},
|
|
watch: {
|
|
value(newValue, preValue) {
|
|
if (newValue !== preValue && newValue !== this.editor.getValue()) {
|
|
this.editor.setValue(newValue)
|
|
}
|
|
},
|
|
language(val) {
|
|
this.destroyEditor()
|
|
this.initEditor()
|
|
},
|
|
height(newValue) {
|
|
this.editor.height(newValue)
|
|
},
|
|
mode(newValue) {
|
|
this.editor.changeMode(newValue)
|
|
}
|
|
},
|
|
mounted() {
|
|
this.initEditor()
|
|
},
|
|
destroyed() {
|
|
this.destroyEditor()
|
|
},
|
|
methods: {
|
|
initEditor() {
|
|
this.editor = new Editor({
|
|
el: document.getElementById(this.id),
|
|
...this.editorOptions
|
|
})
|
|
if (this.value) {
|
|
this.editor.setValue(this.value)
|
|
}
|
|
this.editor.on('change', () => {
|
|
this.$emit('input', this.editor.getValue())
|
|
})
|
|
},
|
|
destroyEditor() {
|
|
if (!this.editor) return
|
|
this.editor.off('change')
|
|
this.editor.remove()
|
|
},
|
|
setValue(value) {
|
|
this.editor.setValue(value)
|
|
},
|
|
getValue() {
|
|
return this.editor.getValue()
|
|
},
|
|
setHtml(value) {
|
|
this.editor.setHtml(value)
|
|
},
|
|
getHtml() {
|
|
return this.editor.getHtml()
|
|
}
|
|
}
|
|
}
|
|
</script>
|