UNPKG

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