zyf-markdown v1.5.4
zyf-markdown
This plug-in is only a simple version of markdown tool and is not compatible with vue3 0 Support custom image upload function and will be continuously optimized.
仓库地址
示例(demo)
安装(install)
npm install zyf-markdown
使用(use)
在main.js中调用
import markDown from 'zyf-markdown'
Vue.use(markDown)
示例 (example)
<template>
<div class="example-wrap">
<markDown
v-model="content"
:toolbars="toolbars"
:readonly="false"
:disabled="false"
:useImgPreview="true"
style="width:100%;height:100%;"
@uploadImage="uploadImage"
@getImgUrl="getImgUrl"
/>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
content: '',
toolbars: {
tabBar: true, // 启用操作栏
preview: true, // 开启预览
bold: true, // 加粗
italic: true, // 倾斜
useH: true, // 使用标题
table: true, // 表格
alignleft: true, // 居左
aligncenter: true, // 居中
alignright: true, // 居右
code: true, // 代码
link: true, // 链接
img: true, // 图片
del: true, // 删除线
quote: true, // 引用
strikethrough: true, // 横线
ol: true, // 有序列表
ul: true, // 无序列表
}
}
},
methods: {
// 上传图片
uploadImage(e) {
console.log(e, e.name)
//Write your own upload method here. E is the file object returned to you by markdown
const formData = new FormData()
formData.append('file', e)
axios({
url: 'url',
method: 'post',
data: formData,
}).then(res=>{
console.log('res=>',res);
// Imgurladd has two parameters imgurladd (URL, name)
this.$refs.MarkDown.imgUrlAdd('url: 这儿写url->res.url', e.name)
}).catch(() => {})
},
getImgUrl(e) {
// get image url
}
}
}
</script>
<style>
.example-wrap /deep/ #editor{
min-height:calc(100% - 51px) !important;
}
.example-wrap /deep/ textarea {
min-height:calc(100% - 51px) !important;
}
</style>
<style lang="scss">
.example-wrap{
width:100%;
height:100%;
}
</style>
上传图片 (upload images)
uploadImage(e) {
console.log(e, e.name)
//Write your own upload method here. E is the file object returned to you by markdown
const formData = new FormData()
formData.append('file', e)
axios({
url: 'url',
method: 'post',
data: formData,
}).then(res=>{
console.log('res=>',res);
// Imgurladd has two parameters imgurladd (URL, name)
this.$refs.MarkDown.imgUrlAdd('url: 这儿写url->res.url', e.name)
}).catch(() => {})
}
配置项 (setting)
field | type | Default | descripe |
---|---|---|---|
toolbars | Object | {} | toolbars |
readonly | Bollean | false | readonly |
disabled | Bollean | false | disabled |
useImgPreview | Bollean | true | image preview |
toolbars配置项 (toolbars setting)
field | type | Default | descripe |
---|---|---|---|
tabBar | Bollean | true | action bar |
preview | Bollean | true | preview |
bold | Bollean | true | bold |
italic | Bollean | true | italic |
useH | Bollean | true | use Title |
table | Bollean | true | table |
alignleft | Bollean | true | Align left |
aligncenter | Bollean | true | Align center |
alignright | Bollean | true | Align center |
code | Bollean | true | code |
link | Bollean | true | link |
img | Bollean | true | image |
del | Bollean | true | del |
quote | Bollean | true | quote |
strikethrough | Bollean | true | strikethrough |
ol | Bollean | true | ol |
ul | Bollean | true | ul |
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago