[zyf-markdown]介绍一款vue的markdown插件zyf-markdown

今天介绍一款vue的markdown插件。这个插件目前只兼容vue2.x，兼容ie，vue3.0没测试过

仓库地址

国内仓库地址
仓库地址

示例

demo

安装

  npm install zyf-markdown

使用

在main.js中调用
import markDown from 'zyf-markdown'
Vue.use(markDown)

示例

<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)//这儿写自己的上传方法，e是markdown返回给你的file对象const formData = new FormData()formData.append('file', e)axios({url: '上传图片的地址',method: 'post',data: formData,}).then(res=>{console.log('res=>',res);// imgUrlAdd 有两个参数imgUrlAdd(url, name)this.$refs.MarkDown.imgUrlAdd('url: 这儿写url->res.url', e.name)           }).catch(() => {})},getImgUrl(e) {// 获取到点击图片的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>

上传图片

uploadImage(e) {console.log(e, e.name)//这儿写自己的上传方法，e是markdown返回给你的file对象const formData = new FormData()formData.append('file', e)axios({url: '上传图片的地址',method: 'post',data: formData,}).then(res=>{console.log('res=>',res);// imgUrlAdd 有两个参数imgUrlAdd(url, name)this.$refs.MarkDown.imgUrlAdd('url: 这儿写url->res.url', e.name)           }).catch(() => {})
}

配置项

字段	类型	默认值	描述
toolbars	Object	{}	顶部操作栏，配置见’toolbars’配置
readonly	Bollean	false	是否只读
disabled	Bollean	false	是否不可编辑
useImgPreview	Bollean	true	是否可以预览图片

toolbars配置项

字段	类型	默认值	描述
tabBar	Bollean	true	启用操作栏
preview	Bollean	true	是否开启预览
bold	Bollean	true	是否开启加粗
italic	Bollean	true	启用倾斜字体
useH	Bollean	true	是否使用不同主题大小的字体
table	Bollean	true	是否使用表格
alignleft	Bollean	true	居左对齐
aligncenter	Bollean	true	居中对齐
alignright	Bollean	true	居右对齐
code	Bollean	true	代码
link	Bollean	true	链接
img	Bollean	true	图片上传
del	Bollean	true	删除线
quote	Bollean	true	引用
strikethrough	Bollean	true	横线
ol	Bollean	true	无序列表
ul	Bollean	true	有序列表

[zyf-markdown]介绍一款vue的markdown插件zyf-markdown相关推荐

今天介绍一款事半功倍的Maya插件包
大家好,今天简单介绍一款Maya插件包: malcolm341_mega_pack mega_pack界面展示这个插件包目前的应用比较广泛,我周围的同事们都利用该插件包里的内容,提高自己的工作效率 ...
介绍两款WordPress文章转移插件
1. Inline Posts 如果想让你的子页面像首页一样出现文章列表 Wordpress lets you create pages that contain static content. T ...
最好用的 6 款 Vue 拖拽组件库推荐 - 卡拉云
本文首发:<最好用的 6 款 Vue 拖拽组件库推荐 - 卡拉云> Vue 拖拽组件库(drag-and-drop)组件在使用 Vue 框架开发中非常常见的需求,做个内容行排序,拖拽小组件 ...
前端技巧|Chrome上4款超级实用的插件！
作为一个前端程序猿,你打开他的Chrome浏览器,在里面肯定会看到不少的插件,这些插件简直好用到不用太方便.今天小千就来给大家介绍4款超级实用的插件,不需要懂前端就能轻松使用,错过就是一个亿哦~~ 1 ...
5款WordPress代码高亮插件
本文为你介绍5款WordPress代码高亮插件.这些插件对于开发者很有用,他们经常会在博文中包含CSS.JS或其他语言的代码.通过使用以下插件,可以帮助更好地突出显示代码块. 1. CodeColo ...
Typora开始收费，介绍几款免费的MarkDown编辑器
大家好,我是TJ 一个励志推荐10000款开源项目与工具的程序员前两天,一场突如其来的新闻,让本来就不富裕的TJ君更是雪上加霜. 什么事情呢?Typora,大家一定都在用吧,作为一款主打免费旗号的M ...
介绍一款Markdown格式写作神器Typora
Typora 是一款强大且功能完善的 Markdown 编辑器,免费且可跨平台使用,可以在 Windows,MacOS 和 Linux 系统上安装使用,它拥有友好的用户界面,支持实时预览,能够更加高效 ...
Markdown介绍
2019独角兽企业重金招聘Python工程师标准>>> Markdown介绍 Markdown是一种轻量级的标记语言.主要用于写出带有格式的文档.有点类似于HTML语言,但是语法要比 ...
【Tools】MarkDown教程(五)-CSDN MarkDown介绍
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一 ...
标记语言Markdown介绍以及日常使用
Markdown介绍 Markdown是一种文本标记语言,用于快速文档排版 Markdown文件为纯文本文件,后缀名为 .md Markdown介于Word和HTML之间比起Word,Markdow ...

[zyf-markdown]介绍一款vue的markdown插件zyf-markdown

仓库地址

示例

安装

使用

示例

上传图片

配置项

toolbars配置项

[zyf-markdown]介绍一款vue的markdown插件zyf-markdown相关推荐

最新文章

热门文章