3ec36d209a
Former-commit-id: 7e01c1356a2ab40ebb0e6ac05088c6c38e2540db Former-commit-id: 27ed0e01cb981f2bd98d397cf0f09e8dd2956e96 Former-commit-id: dc771cb58b8af0ea02b588038767c1d6c7140989
76 lines
1.3 KiB
Vue
76 lines
1.3 KiB
Vue
<template>
|
|
<div class="markdown-editor">
|
|
<textarea ref="mde"></textarea>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import SimpleMDE from 'simplemde'
|
|
export default {
|
|
props: {
|
|
// 值
|
|
value: {
|
|
type: String,
|
|
required: false,
|
|
default: ''
|
|
},
|
|
// 配置参数
|
|
config: {
|
|
type: Object,
|
|
required: false,
|
|
default: () => ({})
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
// 编辑器实例
|
|
mde: null,
|
|
// 编辑器默认参数
|
|
// 详见 https://github.com/sparksuite/simplemde-markdown-editor#configuration
|
|
defaultConfig: {
|
|
autoDownloadFontAwesome: false
|
|
}
|
|
}
|
|
},
|
|
mounted () {
|
|
// 初始化
|
|
this.init()
|
|
},
|
|
destroyed () {
|
|
// 在组件销毁后销毁实例
|
|
this.mde = null
|
|
},
|
|
methods: {
|
|
// 初始化
|
|
init () {
|
|
// 合并参数
|
|
const config = Object.assign({}, this.defaultConfig, this.config)
|
|
// 初始化
|
|
this.mde = new SimpleMDE({
|
|
...config,
|
|
// 初始值
|
|
initialValue: this.value,
|
|
// 挂载元素
|
|
element: this.$refs.mde
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.markdown-editor {
|
|
.markdown-body {
|
|
padding: 0.5em;
|
|
}
|
|
}
|
|
.markdown-editor {
|
|
.editor-preview-active {
|
|
display: block;
|
|
}
|
|
.editor-preview-active-side {
|
|
display: block;
|
|
}
|
|
}
|
|
</style>
|