UNPKG

2.33 kBMarkdownView Raw
1# markdown 编辑器
2
3## 代码演示
4
5### 编辑模式
6:::kview
7
8```html
9<template>
10 <k-markdown v-model="content" @onsave="saveMd" />
11</template>
12
13<script>
14
15 export default {
16 data() {
17 return {
18 content: ":laughing: Thank you for using k-markdown at edit mode",
19 isMine: true,
20 }
21 },
22 methods: {
23 saveMd(str, renderStr) {
24 console.log(str, renderStr);
25 }
26 },
27 }
28</script>
29```
30
31:::
32
33### 预览模式
34
35:::kview
36
37```html
38<template>
39 <k-markdown v-model="content" mode="preview" @onsave="saveMd" />
40</template>
41
42<script>
43 export default {
44 data() {
45 return {
46 content: ":kissing_heart: Thank you for using k-markdown at preview mode",
47 isMine: true,
48 }
49 },
50 methods: {
51 saveMd(str, renderStr) {
52 console.log(str, renderStr);
53 }
54 },
55 }
56</script>
57```
58
59:::
60
61## Props
62
63<div class="markdown-table">
64
65| 参数 | 说明 | 类型 | 默认值| 是否必须|
66|-------|---------|------|--------|----------|
67|mode|模式(editor、preview)|string|editor|-
68|v-model|双向绑定，markdown 字符串|string|-|-
69|markdownOption|markdown配置，[参考链接](https://github.com/hinesboy/mavonEditor#props)|object|详见markkdownOption 默认配置|-
70
71</div>
72
73
74### markdownOption 默认配置
75
76```javascript
77{
78 bold: true, // 粗体
79 italic: true, // 斜体
80 header: true, // 标题
81 underline: true, // 下划线
82 mark: true, // 标记
83 superscript: true, // 上角标
84 quote: true, // 引用
85 ol: true, // 有序列表
86 link: true, // 链接
87 imagelink: true, // 图片链接
88 help: true, // 帮助
89 code: true, // code
90 subfield: true, // 是否需要分栏
91 fullscreen: true, // 全屏编辑
92 readmodel: true, // 沉浸式阅读
93 undo: true, // 上一步
94 trash: true, // 清空
95 save: true, // 保存（触发events中的save事件）
96 navigation: true,
97 boxShadow: false,
98 ediMarkDown: false,
99 toolbarsFlag: false,
100 defaultOpen: "preview",
101 toolbars: {
102 navigation: true, // 导航目录
103 },
104```
105