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 highlight from 'highlight.js'
|
||||||
import bandupan from './plugin/baidupan'
|
import bandupan from './plugin/baidupan'
|
||||||
export default {
|
export default {
|
||||||
|
name: 'd2-markdown',
|
||||||
props: {
|
props: {
|
||||||
url: {
|
url: {
|
||||||
type: String,
|
type: String,
|
||||||
|
|||||||
@@ -5,6 +5,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import SimpleMDE from 'simplemde'
|
import SimpleMDE from 'simplemde'
|
||||||
export default {
|
export default {
|
||||||
|
name: 'd2-mde',
|
||||||
props: {
|
props: {
|
||||||
// 值
|
// 值
|
||||||
value: {
|
value: {
|
||||||
@@ -8,7 +8,7 @@ import 'quill/dist/quill.core.css'
|
|||||||
import 'quill/dist/quill.snow.css'
|
import 'quill/dist/quill.snow.css'
|
||||||
import 'quill/dist/quill.bubble.css'
|
import 'quill/dist/quill.bubble.css'
|
||||||
export default {
|
export default {
|
||||||
name: 'QuillEditor',
|
name: 'd2-quill',
|
||||||
props: {
|
props: {
|
||||||
value: {
|
value: {
|
||||||
type: String,
|
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-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-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('d2-markdown', resolve => { require(['@/components/core/d2-markdown'], resolve) })
|
||||||
Vue.component('QuillEditor', resolve => { require(['@/components/core/QuillEditor'], resolve) })
|
Vue.component('d2-quill', resolve => { require(['@/components/core/d2-quill'], resolve) })
|
||||||
Vue.component('SimpleMDE', resolve => { require(['@/components/core/SimpleMDE'], resolve) })
|
Vue.component('d2-mde', resolve => { require(['@/components/core/d2-mde'], resolve) })
|
||||||
|
|||||||
@@ -6,13 +6,12 @@
|
|||||||
title="基本示例"
|
title="基本示例"
|
||||||
url="https://github.com/quilljs/quill">
|
url="https://github.com/quilljs/quill">
|
||||||
</PageHeader>
|
</PageHeader>
|
||||||
<QuillEditor
|
<d2-quill
|
||||||
style="min-height: 200px;"
|
style="min-height: 200px;"
|
||||||
v-model="value"
|
v-model="value"
|
||||||
@text-change="textChangeHandler"
|
@text-change="textChangeHandler"
|
||||||
@selection-change="selectionChangeHandler"
|
@selection-change="selectionChangeHandler"
|
||||||
@editor-change="editorChangeHandler">
|
@editor-change="editorChangeHandler"/>
|
||||||
</QuillEditor>
|
|
||||||
</el-card>
|
</el-card>
|
||||||
<el-card>
|
<el-card>
|
||||||
<template slot="header">输出</template>
|
<template slot="header">输出</template>
|
||||||
|
|||||||
@@ -6,10 +6,9 @@
|
|||||||
title="基本示例"
|
title="基本示例"
|
||||||
url="https://github.com/sparksuite/simplemde-markdown-editor">
|
url="https://github.com/sparksuite/simplemde-markdown-editor">
|
||||||
</PageHeader>
|
</PageHeader>
|
||||||
<SimpleMDE
|
<d2-mde
|
||||||
v-model="text"
|
v-model="text"
|
||||||
class="mde">
|
class="mde"/>
|
||||||
</SimpleMDE>
|
|
||||||
</el-card>
|
</el-card>
|
||||||
<el-card>
|
<el-card>
|
||||||
<template slot="header">输出</template>
|
<template slot="header">输出</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user