Vue编写markdown或者展⽰markdown
之前做博客开发的时候，需要markdown的⽀持，了很多资料，但是都是七拼⼋凑的，要么是告诉你怎么编写markdown，要么是告诉你怎么展⽰，我把它们总结⼀下。
1、介绍mavonEditor
mavonEditor是基于Vue的markdown 编辑器插件，⽀持⾃定义界⾯，代码⾼亮，图⽚上传，这些在github中都有写到，相关资料可以
去github查看
2、安装mavonEditor
$ npm install mavon-editor --save 或者
$ yarn add mavon-editor
在main.js中
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor)
3、使⽤mavonEditor编辑markdown
在.vue⽂件中
<template>
<div>
<mavon-editor v-model="value"/>
</div>
</template>
<script>
export default {
data() {
return {
value: '',
defaultData: "preview"
};
},
};
</script>
打开页⾯显⽰可编辑的页⾯
4、使⽤v-html展⽰markdown
<article v-html="value" ></article>
<script>
export default {
data() {
return {//value的值是经过markdown解析后的⽂本，可使⽤`@change="changeData"`在控制台打印显
⽰ value: `<blockquote>
<p>你好</p>
</blockquote>
<p><code>java</code></p>`,
defaultData: "preview"
};
},
methods: {
}
};
</script>
以下取⾃，查看详细信息请移步
API ⽂档
props
name 名称type 类
型
default 默认
值
describe 描述
value String初始值
language String zh-CN语⾔选择，暂⽀持 zh-CN: 中⽂简体 ， en: 英⽂ ， fr: 法语, pt-BR: 葡萄⽛语, ru: 俄语fontSize String15px编辑区域⽂字⼤⼩
scrollStyle Boolean true开启滚动条样式(暂时仅⽀持chrome)
boxShadow Boolean true开启边框阴影
subfield Boolean true true： 双栏(编辑预览同屏)， false： 单栏(编辑预览分屏)
defaultOpen String edit： 默认展⽰编辑区域 ， preview： 默认展⽰预览区域 , 其他 = edit placeholder String开始编辑…输⼊框为空时默认提⽰⽂本
editable Boolean true是否允许编辑
codeStyle String
code-github
markdown样式： 默认github,toolbarsFlag Boolean true ⼯具栏是否显⽰navigation Boolean false 默认展⽰⽬录ishljs
Boolean
true
代码⾼亮
imageFilter function null
图⽚过滤函数，参数为⼀个File Object ，要求返回⼀个Boolean , true 表⽰⽂件合法，false 表⽰⽂件不
合法
imageClick function null 图⽚点击事件，默认为预览，可覆盖
toolbars
Object
如下例
⼯具栏
name 名称type 类型default 默认值
describe 描述
/*
默认⼯具栏按钮全部开启, 传⼊⾃定义对象 例如: {
bold: true, // 粗体 italic: true,// 斜体 header: true,// 标题 }
html导航源码此时, 仅仅显⽰此三个功能键 */toolbars : {
bold : true , // 粗体 italic : true , // 斜体 header : true , // 标题 underline : true , // 下划线 strikethrough : true , // 中划线 mark : true , // 标记 superscript : true , // 上⾓标 subscript : true , // 下⾓标 quote : true , // 引⽤ ol : true , // 有序列表 ul : true , // ⽆序列表 link : true , // 链接
imagelink : true , // 图⽚链接 code : true , // code table : true , // 表格 fullscreen : true , // 全屏编辑 readmodel : true , // 沉浸式阅读 htmlcode : true , // 展⽰html 源码 help : true , // 帮助 /* 1.3.5 */
undo : true , // 上⼀步 redo : true , // 下⼀步 trash : true , // 清空
save : true , // 保存（触发events 中的save 事件） /* 1.4.2 */
navigation : true , // 导航⽬录 /* 2.1.8 */
alignleft : true , // 左对齐 aligncenter : true , // 居中 alignright : true , // 右对齐 /* 2.2.1 */
subfield : true , // 单双栏模式 preview : true , // 预览 }
events 事件绑定
name ⽅法名
params 参数
describe 描述
change
String: value , String: render
编辑区发⽣变化的回调事件(render: value 经过markdown解析后的结果)
save String: value , String: render ctrl + s 的回调事件(保存按键，同样触发该回调) name ⽅法名params 参数describe 描述
fullScreen Boolean: status , String: value切换全屏编辑的回调事件(boolean: 全屏开启状态)
readModel Boolean: status , String: value切换沉浸式阅读的回调事件(boolean: 阅读开启状态)
htmlCode Boolean: status , String: value查看html源码的回调事件(boolean: 源码开启状态) subfieldToggle Boolean: status , String: value切换单双栏编辑的回调事件(boolean: 双栏开启状态) previewToggle Boolean: status , String: value切换预览编辑的回调事件(boolean: 预览开启状态)
helpToggle Boolean: status , String: value查看帮助的回调事件(boolean: 帮助开启状态) navigationToggle Boolean: status , String: value切换导航⽬录的回调事件(boolean: 导航开启状态) imgAdd String: filename, File: imgfile图⽚⽂件添加回调事件(filename: 写在md中的⽂件名, File: File Object) imgDel String: filename图⽚⽂件删除回调事件(filename: 写在md中的⽂件名)
代码⾼亮
如不需要hightlight代码⾼亮显⽰，你应该设置ishljs为false
开启代码⾼亮props
// ishljs默认为true
<mavon-editor :ishljs ="true"></mavon-editor>
为优化插件体积，从v2.4.2起以下⽂件将默认使⽤cdnjs外链:
highlight.js
github-markdown-css
katex(v2.4.7)
代码⾼亮highlight.js中的语⾔解析⽂件和代码⾼亮样式将在使⽤时按需加载.
github-markdown-css和katex仅会在mounted时加载
Notice:
和 是从 导出的
图⽚上传
<template>
<mavon-editor ref=md @imgAdd="$imgAdd" @imgDel="$imgDel"></mavon-editor>
</template>
exports default{
methods:{
// 绑定@imgAdd event
$imgAdd(pos, $file){
// 第⼀步.将图⽚上传到服务器.
var formdata =new FormData();
formdata.append('image', $file);
axios({
url:'server url',
method:'post',
data: formdata,
headers:{'Content-Type':'multipart/form-data'},
}).then((url)=>{
// 第⼆步.将返回的url替换到⽂本原位置 -> 
/**
* $vm 指为mavonEditor实例，可以通过如下两种⽅式获取
* 1. 通过引⼊对象获取: `import {mavonEditor} from ...` 等⽅式引⼊后，`$vm`为`mavonEditor`
* 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
*/
$vm.$img2Url(pos, url);
})
}
}
}
注
默认⼤⼩样式为 min-height: 300px , min-width: 300px 可⾃⾏覆盖
基础z-index: 1500
仅⽤作展⽰可以设置props: toolbarsFlag: false , subfield: false, defaultOpen: "preview"
快捷键
key keycode功能
F8119开启/关闭导航
F9120预览/编辑切换
F10121开启/关闭全屏
F11122开启/关闭阅读模式
F12123单栏/双栏切换
TAB9缩进CTRL + S17 + 83触发保存
CTRL + D17 + 68删除选中⾏
CTRL + Z17 + 90上⼀步
CTRL + Y17 + 89下⼀步CTRL + BreakSpace17 + 8清空编辑CTRL + B17 + 66加粗
CTRL + I17 + 73斜体
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论