115 lines
2.2 KiB
Vue
115 lines
2.2 KiB
Vue
<template>
|
|
<div class='simplemde-container' :style="{height:height+'px',zIndex:zIndex}">
|
|
<textarea :id='id'>
|
|
</textarea>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import 'simplemde/dist/simplemde.min.css'
|
|
import SimpleMDE from 'simplemde'
|
|
|
|
export default {
|
|
name: 'simplemde-md',
|
|
props: {
|
|
value: String,
|
|
id: {
|
|
type: String,
|
|
default: 'markdown-editor'
|
|
},
|
|
autofocus: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
height: {
|
|
type: Number,
|
|
default: 150
|
|
},
|
|
zIndex: {
|
|
type: Number,
|
|
default: 10
|
|
},
|
|
toolbar: {
|
|
type: Array
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
simplemde: null,
|
|
hasChange: false
|
|
}
|
|
},
|
|
watch: {
|
|
value(val) {
|
|
if (val === this.simplemde.value() && !this.hasChange) return
|
|
this.simplemde.value(val)
|
|
}
|
|
},
|
|
mounted() {
|
|
this.simplemde = new SimpleMDE({
|
|
element: document.getElementById(this.id),
|
|
autofocus: this.autofocus,
|
|
toolbar: this.toolbar,
|
|
spellChecker: false,
|
|
insertTexts: {
|
|
link: ['[', ']( )']
|
|
},
|
|
// hideIcons: ['guide', 'heading', 'quote', 'image', 'preview', 'side-by-side', 'fullscreen'],
|
|
placeholder: this.placeholder
|
|
})
|
|
if (this.value) {
|
|
this.simplemde.value(this.value)
|
|
}
|
|
this.simplemde.codemirror.on('change', () => {
|
|
if (this.hasChange) {
|
|
this.hasChange = true
|
|
}
|
|
this.$emit('input', this.simplemde.value())
|
|
})
|
|
},
|
|
destroyed() {
|
|
this.simplemde = null
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.simplemde-container .CodeMirror {
|
|
/*height: 150px;*/
|
|
min-height: 150px;
|
|
}
|
|
|
|
.simplemde-container .CodeMirror-scroll {
|
|
min-height: 150px;
|
|
}
|
|
|
|
.simplemde-container .CodeMirror-code {
|
|
padding-bottom: 40px;
|
|
}
|
|
|
|
.simplemde-container .editor-statusbar {
|
|
display: none;
|
|
}
|
|
|
|
.simplemde-container .CodeMirror .CodeMirror-code .cm-link {
|
|
color: #1482F0;
|
|
}
|
|
|
|
.simplemde-container .CodeMirror .CodeMirror-code .cm-string.cm-url {
|
|
color: #2d3b4d;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.simplemde-container .CodeMirror .CodeMirror-code .cm-formatting-link-string.cm-url {
|
|
padding: 0 2px;
|
|
font-weight: bold;
|
|
color: #E61E1E;
|
|
}
|
|
</style>
|
|
|
|
|