vue項目使用Markdow編輯器詳解
tips：
第一點：編輯器是帶有頂部工具欄的，默認是在線獲取FontAwesome
但是在國內要么訪問慢，要么訪問不了，所以需要再配置中設置自動下載字體圖標為false
autoDownloadFontAwesome: false
然后再組件中引入FontAwesome
第二點：根據自己的需求做個性化設置，我本地調試的時候，引用樣式不管用
所以我直接就把這個功能給取消了，沒有在配置中取消（因為沒找到方法）而是直接覆蓋了樣式
1.安裝引入
npm install simplemde --save //markdown編輯器
npm install font-awesome --save //FontAwesome字體圖標
npm install showdown --save //轉換markdown語法
2.新建markdown組件
//html
<template>
<div class="simplemde-container" :style="{height:height+'px',zIndex:zIndex}">
<textarea :id="id">
</textarea>
</div>
</template>
//js
import 'font-awesome/css/font-awesome.min.css'
import 'simplemde/dist/simplemde.min.css'
import SimpleMDE from 'simplemde'
export default {
data () {
return {
simplemde: null,
hasChange: false
}
},
props: {
value: String,
id: {
type: String
},
autofocus: {
type: Boolean,
default: false
},
placeholder: {
type: String,
default: ''
},
height: {
type: Number,
default: 150
},
zIndex: {
type: Number,
default: 10
},
toolbar: {
type: Array
}
},
watch: {
value(val) {
console.log(val)
if (val === this.simplemde.value() && !this.hasChange) return
this.simplemde.value(val)
}
},
mounted() {
this.simplemde = new SimpleMDE({
element: document.getElementById(this.id || 'markdown-editor-' + +new Date()),
autoDownloadFontAwesome: false,
autofocus: this.autofocus,
toolbar: this.toolbar,
spellChecker: false,
insertTexts: {
link: ['[', ']( )']
},
// hideIcons: ['guide', 'heading', 'quote', 'image', 'preview', 'side-by-side', 'fullscreen'],
placeholder: this.placeholder
})
if (this.value) {
this.simplemde.value(this.value)
}
this.simplemde.codemirror.on('change', () => {
if (this.hasChange) {
this.hasChange = true
}
this.$emit('input', this.simplemde.value())
})
},
destroyed() {
this.simplemde.toTextArea()
this.simplemde = null
}
}
//css 根據自己的需求覆蓋原樣式
.simplemde-container>>>.CodeMirror {
min-height: 150px;
line-height: 20px;
}
.simplemde-container>>>.CodeMirror-scroll {
min-height: 150px;
max-height:200px;
}
.simplemde-container>>>.CodeMirror-code {
padding-bottom: 40px;
}
.simplemde-container>>>.editor-statusbar {
display: none;
}
.simplemde-container>>>.CodeMirror .CodeMirror-code .cm-link {
color: #1890ff;
}
.simplemde-container>>>.CodeMirror .CodeMirror-code .cm-string.cm-url {
color: #2d3b4d;
}
.simplemde-container>>>.CodeMirror .CodeMirror-code .cm-formatting-link-string.cm-url {
padding: 0 2px;
color: #E61E1E;
}
.simplemde-container >>> .editor-toolbar.fullscreen,
.simplemde-container >>> .CodeMirror-fullscreen {
z-index: 1003;
}
.simplemde-container >>> .fa-columns,
.simplemde-container >>> .fa-arrows-alt,
.simplemde-container >>> .fa-eye,
.simplemde-container >>> .fa-question-circle,
.simplemde-container >>> .separator,
.simplemde-container >>> .fa-quote-left{
display:none;
}
3.在頁面中引入組件并使用
<template>
<div class="components-container">
<div class="editor-container">
<markdown-editor id="contentEditor" ref="contentEditor" v-model="content" :height="300" :zIndex="20"></markdown-editor>
</div>
<button @click="markdown2Html">To HTML</button>
<div v-html="html"></div>
</div>
</template>
<script>
import MarkdownEditor from '@/components/markDown'
const content = `
**this is test**
* vue
* element
1. markdown
2. editor
## Simplemde
[link](https://www.baidu.com)
`
export default {
components: { MarkdownEditor },
data () {
return {
content: content,
html: ''
}
},
methods: {
markdown2Html() {
import('showdown').then(showdown => {
const converter = new showdown.Converter()
this.html = converter.makeHtml(this.content)
})
}
}
}
</script>
最終效果圖
最終效果圖
