173520d20e
Former-commit-id: 0a96bb54e9270e451e59b72e00e35053a7c0e152 Former-commit-id: c250ba90da6546626b9831847630aae786c88344 Former-commit-id: c1182b1bdc6ea9b3934275286a93e2760a643bfe
111 lines
2.4 KiB
Vue
111 lines
2.4 KiB
Vue
<template>
|
|
<div class="markdown-editor">
|
|
<textarea></textarea>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import SimpleMDE from 'simplemde'
|
|
import marked from 'marked'
|
|
|
|
export default {
|
|
name: 'markdown-editor',
|
|
props: {
|
|
value: String,
|
|
previewClass: String,
|
|
autoinit: {
|
|
type: Boolean,
|
|
default () {
|
|
return true
|
|
}
|
|
},
|
|
highlight: {
|
|
type: Boolean,
|
|
default () {
|
|
return false
|
|
}
|
|
},
|
|
sanitize: {
|
|
type: Boolean,
|
|
default () {
|
|
return false
|
|
}
|
|
},
|
|
configs: {
|
|
type: Object,
|
|
default () {
|
|
return {}
|
|
}
|
|
}
|
|
},
|
|
mounted () {
|
|
if (this.autoinit) this.initialize()
|
|
},
|
|
activated () {
|
|
const editor = this.simplemde
|
|
if (!editor) return
|
|
const isActive = editor.isSideBySideActive() || editor.isPreviewActive()
|
|
if (isActive) editor.toggleFullScreen()
|
|
},
|
|
methods: {
|
|
initialize () {
|
|
const configs = {
|
|
element: this.$el.firstElementChild,
|
|
initialValue: this.value,
|
|
renderingConfig: {}
|
|
}
|
|
Object.assign(configs, this.configs)
|
|
|
|
// 判断是否开启代码高亮
|
|
if (this.highlight) {
|
|
configs.renderingConfig.codeSyntaxHighlighting = true
|
|
}
|
|
|
|
// 设置是否渲染输入的html
|
|
marked.setOptions({ sanitize: this.sanitize })
|
|
|
|
// 实例化编辑器
|
|
this.simplemde = new SimpleMDE(configs)
|
|
|
|
// 添加自定义 previewClass
|
|
const className = this.previewClass || ''
|
|
this.addPreviewClass(className)
|
|
|
|
// 绑定事件
|
|
this.bindingEvents()
|
|
},
|
|
bindingEvents () {
|
|
this.simplemde.codemirror.on('change', () => {
|
|
this.$emit('input', this.simplemde.value())
|
|
})
|
|
},
|
|
addPreviewClass (className) {
|
|
const wrapper = this.simplemde.codemirror.getWrapperElement()
|
|
const preview = document.createElement('div')
|
|
wrapper.nextSibling.className += ` ${className}`
|
|
preview.className = `editor-preview ${className}`
|
|
wrapper.appendChild(preview)
|
|
}
|
|
},
|
|
destroyed () {
|
|
this.simplemde = null
|
|
},
|
|
watch: {
|
|
value (val) {
|
|
if (val === this.simplemde.value()) return
|
|
this.simplemde.value(val)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.markdown-editor .markdown-body {
|
|
padding: 0.5em
|
|
}
|
|
|
|
.markdown-editor .editor-preview-active, .markdown-editor .editor-preview-active-side {
|
|
display: block
|
|
}
|
|
</style>
|