vue-freemde
What it is
一个可以自定义编辑和渲染的Vue-Markdown组件, 基于simplemde
Github: https://github.com/yansenlei/vue-freemde
2018-12-15 23.56.19.gif安装
$ npm i vue-freemde -S
使用
Import globally
import Vue from 'vue';
import VueFreemde from 'vue-freemde';
import App from './App';
Vue.config.productionTip = false;
Vue.use(VueFreemde);
/* eslint-disable no-new */
new Vue({
el: '#app',
template: '<App/>',
components: { App },
});
Import locally
import VueFreemde from 'vue-freemde';
export default {
name: 'app',
components: {
VueFreemde,
},
data() {
return {
data: '',
configs: {
spellChecker: false,
autofocus: true,
toolbar: ['bold', 'italic', 'strikethrough', '|', 'link', 'image', {
name: 'custom',
action: (markdown) => {
const data = markdown.value()
this.$emit('save', data)
},
className: 'fa fa-save',
title: 'Save'
}],
markdown () {
// custom render
return render('# title')
},
inlineAttachmentOptions: {
onFileReceived (file) {
// upload to your server, get image url...
this.settings.setAttachmentUrl(url, this)
}
}
}
}
},
computed: {
editor () {
return this.$refs.Markdown.editor
}
}
};
Use in template
<template>
<div id="app">
<vue-freemde v-model="data" ref="Markdown" :configs="configs"></vue-freemde>
</div>
</template>
Configs 配置信息
-
markdown: 自定义渲染器钩子,默认为
marked
- view: 渲染结束的钩子,用于绑定事件或基于元素的渲染
-
inlineAttachmentOptions: 粘贴/拖拽 图片参数
-
onFileReceived: 接收图片的钩子, 参数:
file
. -
progressText: default
'![uploading file...]()'
-
urlText:
'[图片上传失败...(image-4fe02e-1545099213234)]'
. -
errorText:
'Error uploading file'
.
-
onFileReceived: 接收图片的钩子, 参数:
更多配置信息参见: freemde configuration
License
欢迎提交Issues、PR
MIT - yansenlei
网友评论