轻松记录您
灵感和创意

Vue编写markdown或者展示markdown

之前做博客开发的时候,需要Markdown的支持,找了很多资料,但是都是七拼八凑的,要么是告诉你怎么编写Markdown,要么是告诉你怎么展示,我把它们总结一下。

1、介绍mavonEditor

官网:https://md.zhystar.com/

github:https://github.com/hinesboy/mavonEditor

mavonEditor是基于Vue的Markdown 编辑器插件,支持自定义界面,代码高亮,图片上传,这些在github中都有写到,相关资料可以去github查看

2、安装mavonEditor

$ npm install mavon-editor –save 或者$ yarn add mavon-editor

1

2

在main.js中

import mavonEditor from ‘mavon-editor’import ‘mavon-editor/dist/css/index.css’Vue.use(mavonEditor)123

3、使用mavonEditor编辑Markdown

在.vue文件中

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

打开页面显示可编辑的页面

4、使用v-html展示Markdown

123456789101112131415161718

以下取自官网,查看详细信息请移步官网

API 文档

props

name 名称type 类型default 默认值describe 描述

valueString初始值

languageStringzh-CN语言选择,暂支持 zh-CN: 中文简体 , en: 英文 , fr: 法语, pt-BR: 葡萄牙语, ru: 俄语

fontSizeString15px编辑区域文字大小

scrollStyleBooleantrue开启滚动条样式(暂时仅支持chrome)

boxShadowBooleantrue开启边框阴影

subfieldBooleantruetrue: 双栏(编辑预览同屏), false: 单栏(编辑预览分屏)

defaultOpenStringedit: 默认展示编辑区域 , preview: 默认展示预览区域 , 其他 = edit

placeholderString开始编辑…输入框为空时默认提示文本

editableBooleantrue是否允许编辑

codeStyleStringcode-githubMarkdown样式: 默认github, 可选配色方案

toolbarsFlagBooleantrue工具栏是否显示

navigationBooleanfalse默认展示目录

ishljsBooleantrue代码高亮

imageFilterfunctionnull图片过滤函数,参数为一个File Object,要求返回一个Boolean, true表示文件合法,false表示文件不合法

imageClickfunctionnull图片点击事件,默认为预览,可覆盖

toolbarsObject如下例工具栏

/* 默认工具栏按钮全部开启, 传入自定义对象 例如: { bold: true, // 粗体 italic: true,// 斜体 header: true,// 标题 } 此时, 仅仅显示此三个功能键 */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, // 预览 }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

events 事件绑定

name 方法名params 参数describe 描述

changeString: value , String: render编辑区发生变化的回调事件(render: value 经过Markdown解析后的结果)

saveString: value , String: renderctrl + s 的回调事件(保存按键,同样触发该回调)

fullScreenBoolean: status , String: value切换全屏编辑的回调事件(boolean: 全屏开启状态)

readModelBoolean: status , String: value切换沉浸式阅读的回调事件(boolean: 阅读开启状态)

htmlCodeBoolean: status , String: value查看html源码的回调事件(boolean: 源码开启状态)

subfieldToggleBoolean: status , String: value切换单双栏编辑的回调事件(boolean: 双栏开启状态)

previewToggleBoolean: status , String: value切换预览编辑的回调事件(boolean: 预览开启状态)

helpToggleBoolean: status , String: value查看帮助的回调事件(boolean: 帮助开启状态)

navigationToggleBoolean: status , String: value切换导航目录的回调事件(boolean: 导航开启状态)

imgAddString: filename, File: imgfile图片文件添加回调事件(filename: 写在md中的文件名, File: File Object)

imgDelString: filename图片文件删除回调事件(filename: 写在md中的文件名)

代码高亮

如不需要hightlight代码高亮显示,你应该设置ishljs为false

开启代码高亮props

// ishljs默认为true12

为优化插件体积,从v2.4.2起以下文件将默认使用cdnjs外链:

highlight.js

github-Markdown-css

katex(v2.4.7)

代码高亮highlight.js中的语言解析文件和代码高亮样式将在使用时按需加载.

github-Markdown-css和katex仅会在mounted时加载

Notice:

可选配色方案 和 支持的语言 是从 highlight.js/9.12.0 导出的

不使用cdn,本地按需加载点击这里…

图片上传

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替换到文本原位置![…](0) -> ![…](url) /** * $vm 指为mavonEditor实例,可以通过如下两种方式获取 * 1. 通过引入对象获取: import {mavonEditor} from ... 等方式引入后,$vmmavonEditor * 2. 通过$refs获取: html声明ref : $vm.$refs.md */ $vm.$img2Url(pos, url); }) } }} 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 图片上传详情点击这里… 注 <strong>默认大小样式为 min-height: 300px , min-width: 300px 可自行覆盖</strong> <strong>基础z-index: 1500</strong> <strong>仅用作展示可以设置props: toolbarsFlag: false , subfield: false, defaultOpen: 'preview'</strong> 快捷键 keykeycode功能 F8119开启/关闭导航 F9120预览/编辑切换 F10121开启/关闭全屏 F11122开启/关闭阅读模式 F12123单栏/双栏切换 TAB9缩进 CTRL + S17 + 83触发保存 CTRL + D17 + 68删除选中行 CTRL + Z17 + 90上一步 CTRL + Y17 + 89下一步 CTRL + BreakSpace17 + 8清空编辑 CTRL + B17 + 66<strong>加粗</strong> CTRL + I17 + 73斜体 CTRL + H17 + 72# 标题 CTRL + 117 + 97 or 49# 标题 CTRL + 217 + 98 or 50## 标题 CTRL + 317 + 99 or 51### 标题 CTRL + 417 + 100 or 52#### 标题 CTRL + 517 + 101 or 53##### 标题 CTRL + 617 + 102 or 54###### 标题 CTRL + U17 + 85++下划线++ CTRL + M17 + 77标记 CTRL + Q17 + 81> 引用 CTRL + O17 + 791. 有序列表 CTRL + L17 + 76链接 CTRL + ALT + S17 + 18 + 83上角标 CTRL + ALT + U17 + 18 + 85- 无序列表 CTRL + ALT + C17 + 18 + 67代码块

CTRL + ALT + L17 + 18 + 76

CTRL + ALT + T17 + 18 + 84表格

CTRL + SHIFT + S17 + 16 + 83下角标

CTRL + SHIFT + D17 + 16 + 68中划线

CTRL + SHIFT + C17 + 16 + 67居中

CTRL + SHIFT + L17 + 16 + 76居左

CTRL + SHIFT + R17 + 16 + 82居右

SHIFT + TAB16 + 9取消缩进

未经允许不得转载:坚果之云 Markdown » Vue编写markdown或者展示markdown
分享到: 更多 (0)

坚果云Markdown轻松记录您 灵感和创意

坚果云Markdown下载坚果云Markdown介绍