no message
Former-commit-id: 15ad9c05579d01041b7249cd81eda4bbb4b2f85b Former-commit-id: 25b3a6afc1d967fd474038767af4a347498a0d88 Former-commit-id: e368a69ee8117e3439542ae011181270b9c8dd71
This commit is contained in:
@@ -1,110 +0,0 @@
|
||||
<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>
|
||||
@@ -12,6 +12,7 @@ import marked from 'marked'
|
||||
import highlight from 'highlight.js'
|
||||
import bandupan from './plugin/baidupan'
|
||||
export default {
|
||||
name: 'd2-markdown',
|
||||
props: {
|
||||
url: {
|
||||
type: String,
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
<script>
|
||||
import SimpleMDE from 'simplemde'
|
||||
export default {
|
||||
name: 'd2-mde',
|
||||
props: {
|
||||
// 值
|
||||
value: {
|
||||
@@ -8,7 +8,7 @@ import 'quill/dist/quill.core.css'
|
||||
import 'quill/dist/quill.snow.css'
|
||||
import 'quill/dist/quill.bubble.css'
|
||||
export default {
|
||||
name: 'QuillEditor',
|
||||
name: 'd2-quill',
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
@@ -7,5 +7,5 @@ Vue.component('d2-icon', resolve => { require(['@/components/core/d2-icon'], res
|
||||
Vue.component('d2-icon-select', resolve => { require(['@/components/core/d2-icon-select/index.vue'], resolve) })
|
||||
Vue.component('d2-icon-svg', resolve => { require(['@/components/core/d2-icon-svg/index.vue'], resolve) })
|
||||
Vue.component('d2-markdown', resolve => { require(['@/components/core/d2-markdown'], resolve) })
|
||||
Vue.component('QuillEditor', resolve => { require(['@/components/core/QuillEditor'], resolve) })
|
||||
Vue.component('SimpleMDE', resolve => { require(['@/components/core/SimpleMDE'], resolve) })
|
||||
Vue.component('d2-quill', resolve => { require(['@/components/core/d2-quill'], resolve) })
|
||||
Vue.component('d2-mde', resolve => { require(['@/components/core/d2-mde'], resolve) })
|
||||
|
||||
Reference in New Issue
Block a user