no message

Former-commit-id: 15ad9c05579d01041b7249cd81eda4bbb4b2f85b
Former-commit-id: 25b3a6afc1d967fd474038767af4a347498a0d88
Former-commit-id: e368a69ee8117e3439542ae011181270b9c8dd71
This commit is contained in:
liyang
2018-06-10 09:17:28 +08:00
parent cde7d42c81
commit 0f37ec5374
7 changed files with 9 additions and 119 deletions

View File

@@ -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>

View File

@@ -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,

View File

@@ -5,6 +5,7 @@
<script>
import SimpleMDE from 'simplemde'
export default {
name: 'd2-mde',
props: {
//
value: {

View File

@@ -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,

View File

@@ -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) })

View File

@@ -6,13 +6,12 @@
title="基本示例"
url="https://github.com/quilljs/quill">
</PageHeader>
<QuillEditor
<d2-quill
style="min-height: 200px;"
v-model="value"
@text-change="textChangeHandler"
@selection-change="selectionChangeHandler"
@editor-change="editorChangeHandler">
</QuillEditor>
@editor-change="editorChangeHandler"/>
</el-card>
<el-card>
<template slot="header">输出</template>

View File

@@ -6,10 +6,9 @@
title="基本示例"
url="https://github.com/sparksuite/simplemde-markdown-editor">
</PageHeader>
<SimpleMDE
<d2-mde
v-model="text"
class="mde">
</SimpleMDE>
class="mde"/>
</el-card>
<el-card>
<template slot="header">输出</template>